Html 如果 src 为空但没有 javascript/jQuery 或 css3，则隐藏 img 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18886708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hide img tag if src is empty but without javascript/jQuery or css3
提问by Mr. Alien
I am designing templates in Channel Advisor for eBay store and it doesn't allow javascript/jQuery. Also, the CSS3doesn't work in various IEversions specially the img[src=]implementation is broken.
我正在为 eBay 商店在 Channel Advisor 中设计模板，但它不允许javascript/jQuery. 此外，CSS3它在各种IE版本中都不起作用，特别是img[src=]实现被破坏了。
When I use template tags in img like:
当我在 img 中使用模板标签时：
<img src="{{THUMB(ITEMIMAGEURL1)}}"/>
where {{THUMB(ITEMIMAGEURL1)}} is the image path, if the image is missing and the template is posted to eBay then the end result would be like this:
其中 {{THUMB(ITEMIMAGEURL1)}} 是图像路径，如果图像丢失并且模板已发布到 eBay，则最终结果将如下所示：
<img src=""/>
and this shows a broken image.
这显示了一个破碎的图像。
Is there a way to hide <img src=""/>with HTML or CSS that works in IE7+
有没有办法<img src=""/>用 IE7+ 中的 HTML 或 CSS隐藏
回答by Mr. Alien
You can use [attr=val]selector
您可以使用[attr=val]选择器
img[src=""] {
display: none;
}
The above selector will simply match, if the srcattribute has no value. This selector is a general one and will match all the imgtag in the document with an empty src, if you want to target specific ones, than use more specific selector like
如果src属性没有值，上面的选择器将简单匹配。这个选择器是一个通用的选择器，它将匹配img文档中的所有标签为空src，如果你想针对特定的标签，而不是使用更具体的选择器，比如
.class_name img[src=""] {
display: none;
}
Demo(Without the above selector, see that red line?)
Demo（没有上面的选择器，看到那条红线了吗？）
Alternatively, if you want to reserve the space taken by imgtag, you might like to use visibility: hidden;instead of display: none;as display: none;will simply mess your layout where visibility: hidden;will reserve the space, it will just hide the img
或者，如果您想保留img标签占用的空间，您可能希望使用visibility: hidden;而不是display: none;asdisplay: none;只会弄乱您的布局，visibility: hidden;它将保留空间，它只会隐藏img
See the difference between display: none;and visibility: hidden;
见之间的差别display: none;和visibility: hidden;
Demo(visibility: hidden;, reserves space)
Demo( visibility: hidden;, 预留空间)
Demo 2(display: none;, won't reserve space)
Demo 2( display: none;, 不会预留空间)
Note: None of the above selectors will REMOVE the
imgtag from the DOM, it will simply hide it from the front end
注意：以上选择器都不会
img从 DOM 中移除标签，它只会从前端隐藏它
回答by Shalom Aleichem
[attr=value]selector is CSS2, you should be ok.
[attr=value]选择器是 CSS2，你应该没问题。
img[src=""] {
display:none;
}
