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

这是我拥有的以下代码（其中 videos[i]["Thumbnail Title"] 只是“moo.png”或其他图片）

无论出于何种原因，当我查看 html 时，它会显示背景 urlimages video_icons moo.png而不是斜杠。

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

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

显示图像（虽然它不再是我想要的，但斜线符号在那里）

知道该怎么做吗？谢谢！

编辑：
我有以下 CSS 类thumb：

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

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

4

3 回答 3

3

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

更改为以下内容：

 "<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>"
于 2013-07-02T23:41:44.983 回答
0

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

图片元素

于 2013-07-02T23:39:14.150 回答
0

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

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

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

我将尝试用简单的步骤来解释转义（以便未来的读者可以自己完成）。

但首先，图像是一个void元素，这意味着它没有结束标签。
所以想象你想要这个作为你的结果 html： 

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

然后在 javascript 中你会选择"字符来包装你的字符串；这样只有 2 个（而不是 4 个）字符可以转义。

请注意，虽然您通常可以省略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"] + "\");'>"

这就对了！好的，您需要将该字符串附加到您的tablevar: table += ? ;：

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

希望这对将来有帮助！

编辑：

Stefan Koenen 对图像的缺失src属性有一个很好的看法。
在HTML4.01 规范中src(和alt) 是required. 在HTML5 提案中，只有src是强制性的（并且必须是有效的），而alt属性是有争议的。
除了这些规则之外，为了跨浏览器的兼容性，作者选择了以下两种常见解决方案中的一种：

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

这是做出有关图像使用的此类（设计）决定的绝佳经验法则。

于 2013-07-03T00:18:16.463 回答