How to parse a string in background-image url in quoted html,javascript?

Question

After getting image name as response from ajax call (image name:Logo, JGP - lille70720150924032031.jpg) from controller to index.html.twig in symfony2,putting the image to a javascript table variable as bellow.

data[index].Interestlogo=image name;

    table="";
    table += "<div class='imgparam th' style='background-image: url({{basepath}}/uploads/Interests/"+data[index].Idinterestmaster+"/thumbnails/"+data[index].Interestlogo+")'></div>";
    $("#results").append(table);

here everything is working fine for all normal image names. if image name=Logo, JGP - lille70720150924032031.jpg then image is not displaying.

here I need to put a double quotes as bellow background-image: url(" path should sit here ");

What I am getting is as bellow background-image: url(path should sit here);//double quotes not there

Please suggest me,how to put double quotes.

Answer 1

If you are dynamicly creating uris you must make sure that they are websafe uris.

Is a URL allowed to contain a space?

They cannot contain spaces. But that is why when you look at this own question's title it has a lot of dashes,

/questions/32783366/how-to-parse-a-string-in-background-image-url-in-quoted-html-javascript

I suggest running your code through a URL encoder.

Encode URL in JavaScript?

I hope this helps

Answer 2

After a lot of research,finally I am very happy that I got Solution.I have seperated url path and put into var urlpath. for urlpath applied quotes by using slash as in the answer code.

Finally that url with quotes has been replaced with background_image url.

var urlpath="{{basepath}}/uploads/Interests/"+data[index].Idinterestmaster+"/thumbnails/"+data[index].Interestlogo;
var withdoublequotes="\""+urlpath+"\"";
table += "<div class='imgparam th' style='background-image: url("+withdoublequotes+")'></div>";