如果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=""/>

Answer 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;，不会预留空间）

---

  

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

Answer 2

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

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