Slash in string disappears in HTML file

Question

    table += "<img class='thumb' style='background-image: url('images/video_icons/" + videos[i]["Thumbnail Title"] + "');'></img>"

This is the following code i have (where videos[i]["Thumbnail Title"] is simply just "moo.png" or some other picture)

For whatever reason, when i view the html it shows the background url as images video_icons moo.png instead of having the slashes.

I think it has to do with "style" since when i change this to:

    table += "<img class='thumb' src='images/video_icons/" + videos[i]["Thumbnail Title"] + "'></img>"

An image displays (although it does no longer what i want it to do, the slash signs are there)

Any idea what to do? Thanks!

---

Edit:
I have the following CSS for the class thumb:

.thumb { display: inline-block; 
         width: 200px; 
         height: 100px;  
         margin: 5px;  
         background-position: center center;  
         background-size: cover;  
} 

and a fiddle (without the javascript) here: http://jsfiddle.net/lucyguo/5wxBP

Answer 1

You have you're quotes confused. The specific area is atstyle='background-image: url('images/video_icons/" + videos[i]["Thumbnail Title"] + "');'. You have single quotes within an attribute who's value is already in single quotes. You can either escape them or just remove them since you don't need them for the url.

Change to the following:

 "<img class='thumb' style='background-image: url('images/video_icons/" + videos[i]["Thumbnail Title"] + "');'></img>"

To:

 "<img class='thumb' style='background-image: url(images/video_icons/" + videos[i]["Thumbnail Title"] + ");'></img>"