encodeURI function doesn't encode parenthesis “( )”

Question

I'm trying to load a background image under a js code as mentioned below:

$('.main-banner').css('background-image', "url("+encodeURI(element.image)+")");

Unfortunately, if the image name element.image contains some parenthesis: ( or ) this will cause a problem, and the image will not load.

Answer 1

encodeURI will not encode the parentheses, Try to replace them manually like :

const url = element.image.replace("(", "%28").replace(")", "%29");
$('.main-banner').css('background-image', "url("+encodeURI(url)+")");

Using the encodeURI method before the replacement will be like :

const url = encodeURI(element.image).replace("(", "%28").replace(")", "%29");
$('.main-banner').css('background-image', "url("+url+")");