如果 src 为空但没有 javascript/jQuery 或 css3，则隐藏 img 标签

Question

我正在为 eBay 商店的 Channel Advisor 设计模板，它不允许 javascript/jQuery 。此外， CSS3 在各种 IE 版本中不起作用，特别是 img[src=] 实现被破坏。

当我在 img 中使用模板标签时，例如：

 <img src="{{THUMB(ITEMIMAGEURL1)}}"/>

其中 {{THUMB(ITEMIMAGEURL1)}} 是图像路径，如果图像丢失并且模板发布到 eBay 那么最终结果将是这样的：

 <img src=""/>

这显示了一个损坏的图像。

有没有一种方法可以使用 IE7+ 中的 HTML 或 CSS 隐藏 <img src=""/>

原文由 user2793981 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 [attr=val] 选择器

img[src=""] {
   display: none;
}

如果 src 属性没有值，上面的选择器将简单匹配。这个选择器是一个通用选择器，它将匹配文档中所有 img 标记为空 src ，如果你想定位特定的选择器，而不是使用更具体的选择器，比如

.class_name img[src=""] {
    display: none;
}

演示

演示（没有上面的选择器，看到那条红线了吗？）

另外，如果您要保留 display: none; display: none; img 标签，您可能希望使用 visibility: hidden; 简单地弄乱你的布局 visibility: hidden; 将保留空间，它只会隐藏 img

查看 display: none; 和 visibility: hidden; 之间的区别

Demo （ visibility: hidden; ，预留空间）

Demo 2 （ display: none; ，不预留空间）

---

注意：以上选择器都不会从 DOM 中删除 img 标签，它只会将其隐藏在前端

原文由 Mr. Alien 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

[attr=value] 选择器是CSS2，你应该没问题。

 img[src=""] {
  display:none;
}

原文由 Shalom Aleichem 发布，翻译遵循 CC BY-SA 3.0 许可协议