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

【问题标题】：hide img tag if src is empty but without javascript/jQuery or css3如果 src 为空但没有 javascript/jQuery 或 css3，则隐藏 img 标签
【发布时间】：2013-09-24 01:36:59
【问题描述】：

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

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

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

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

<img src=""/>

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

有没有办法在 IE7+ 中使用 HTML 或 CSS 隐藏 <img src=""/>

【问题讨论】：

标签： html css image css-selectors

【解决方案1】：

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

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

如果src 属性没有值，上述选择器将简单匹配。这个选择器是一个通用的选择器，它会将文档中的所有img 标记与一个空的src 匹配，如果您想针对特定的选择器，而不是使用更具体的选择器，例如

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

Demo

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

或者，如果您想保留img 标签占用的空间，您可能想使用visibility: hidden; 而不是display: none;，因为display: none; 只会弄乱您的布局，而visibility: hidden; 将保留空间，它只会隐藏img

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

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

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

注意：以上选择器都不会从 DOM，它只会在前端隐藏它

【讨论】：

对于 SEO 问题，将 src 留空并不好，这就是我个人使用 # 作为 src 的原因。全局搜索引擎友好选择器将是 img[src=""], img[src="#"], img:not([src])

【解决方案2】：

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

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

【讨论】：