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:

    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/lucyguo/5wxBP

• javascript
• jquery
• html
• string

• Switch your single quotes to double and double to single...I once had a problem similar to yours and that fixed it. I think there is ambiguity with double vs single in terms of markup – Jose Commented Jul 2, 2013 at 23:36

4 Answers 4

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>"

The image element has 2 required attributes, 'src' and 'alt'. Where 'alt' is an alternative text being displayed when the image can't be found, and 'src' is the url to the image. You are not using any of these attributes. Because i don't see anything else in your style attribute you should just use the 'src' attribute like you did in your second code example.

Img element

Escaping is the (biggest) problem (as Daniel Gimenez already identified while I was still typing this answer), but do read the edit below!

Your first string would render the following (obviously) invalid HTML (note the nested ' characters, the closing tag and the lack of a src attribute):

<img class='thumb' style='background-image: url('images/video_icons/moo.png');'></img>

I'll try to explain the escaping in simple steps (so future readers can do this on their own).

But first, an image is a void element, meaning it has no closing-tag.
So imagine you want this as your resulting html:

<img class='thumb' style='background-image: url("images/video_icons/moo.png");'>

then in javascript you'd choose the " character to wrap your string; that way there are only 2 (instead of 4) characters to escape.

Note that whilst you can generally leave out the quotes in the css url, one must know the exceptions when this doesn't work, so it is safest to use the quotes, then you don't need to remember anything (making it an error-proof and consistent coding style).

Now let's wrap and escape that string (for javascript):

"<img class='thumb' style='background-image: url(\"images/video_icons/moo.png\");'>"

Finally, you want javascript to provide the variable 'moo.png' string.
For clarity, I'll first replace it with a ?.

"<img class='thumb' style='background-image: url(\"images/video_icons/" + ? + "\");'>"

Now let's replace that ? with your videos[i]["Thumbnail Title"] (It does not matter in this case if you used ' or " to call your Thumbnail Title property):

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

That is it! Ok, you'd need to append that string to your table var: table += ? ; :

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

Hope this helps in the future!

EDIT:

Stefan Koenen has a good point about the image's missing src attribute.
In HTML4.01 spec the src (and alt) are required. In the HTML5 proposal, only the src is mandatory (and must be valid) whilst the alt attribute is debatable.
Apart from these rues, just for the sake of cross-browser-patibility, authors have opted for 1 of the following 2 mon solutions:

1. Use a div
   (instead of an image, seems most appropriate solution in this case)
2. Set the src attribute of the image to a transparent gif of 1*1px.
   (Also 'costs' extra image to be loaded)

Here is an excellent rule of thumb for making such (design-)decisions about the usage of images.

Due to HTML rendering slashes getting disappeared. just add double slashes instead of single

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