Question

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

这是我的以下代码（其中视频[i] [“缩略图标题”]只是“moo.png”或其他一些图片）

无论出于何种原因，当我查看html时，它会将背景网址显示为images video_icons moo.png，而不是使用斜杠。

我认为这与“风格”有关，因为我将其更改为：

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

显示图像（虽然它不再是我想要它做的，斜线标志就在那里）

知道该怎么办？谢谢！

修改
我有类thumb的以下CSS：

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

和一个小提琴（没有javascript）在这里：http://jsfiddle.net/lucyguo/5wxBP

Answer 1

你的报价很困惑。具体区域为style='background-image: url('images/video_icons/" + videos[i]["Thumbnail Title"] + "');'。您在属性中有单引号，其值已在单引号中。你可以逃脱它们或只是删除它们，因为你不需要它们用于网址。

更改为以下内容：

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

要：

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

Answer 2

图像元素有2个必需属性，'src'和'alt'。其中'alt'是无法找到图像时显示的替代文本，'src'是图像的url。您没有使用任何这些属性。因为我在你的style属性中没有看到任何其他内容，所以你应该像在第二个代码示例中那样使用'src'属性。

Img element

Answer 3

转义 是（最大的）问题（正如Daniel Gimenez在我还在输入此答案时已经确定的那样），但是请阅读编辑下面！

您的第一个字符串将呈现以下（显然）无效的HTML（请注意嵌套的'字符，结束标记和缺少src属性）：

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

我将尝试以简单的步骤解释逃避（因此未来的读者可以自己做到这一点）。

但首先，图像是void元素，这意味着它具有 no 关闭标记。
所以想象你想要这个作为你的结果html：

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

然后在javascript中你选择"字符来包装你的字符串;这样，只有2个（而不是4个）字符可以逃脱。

注意虽然你通常可以省略quotes in the css url，但是当这不起作用时必须知道例外，所以使用引号是最安全的，那么你不需要记住任何（使其成为一种防错且一致的编码风格）。

现在让我们换行并转义该字符串（对于javascript）：

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

最后，您希望javascript提供变量'moo.png'字符串为清楚起见，我将首先用?替换它。

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

现在让我们用您的?替换videos[i]["Thumbnail Title"]（如果您使用'或"来调用Thumbnail Title媒体资源，则无关紧要）：

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

就是这样！好的，您需要将该字符串附加到table var：table += ? ;：

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

希望将来有所帮助！

编辑：

Stefan Koenen对图片缺少src属性有一个很好的观点。
在HTML4.01 spec中，src（和alt）为required。在HTML5 proposal中，只有src是强制性的（并且必须有效），而alt属性是有争议的。
除了这些因素之外，仅为了跨浏览器兼容性，作者选择了以下两种常见解决方案中的一种：

使用div
（而不是图像，在这种情况下似乎是最合适的解决方案）
将图像的src属性设置为1 * 1px的透明gif （另外'花费'要加载的额外图像）

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

字符串中的斜杠在HTML文件中消失

3 个答案: