Html 将图像 src 设置为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19126185/
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
Setting an image src to empty
提问by user304602
I would like to set an image as nothing. By doing src=""many people say it can cause problems to browsers:
我想将图像设置为空。src=""很多人说这样做会导致浏览器出现问题：
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
so I am not sure if below can face to the same problem as setting src to empty:
所以我不确定下面是否会面临与将 src 设置为空相同的问题：
<img id="myImage">
since there's no src attribute on this case.
因为在这种情况下没有 src 属性。
So If I want to initially set an image to nothing, what's the best I can do?
因此，如果我想最初将图像设置为空，我能做的最好的事情是什么？
回答by Jean-Paul
Best solution
最佳解决方案
Initialise the image as follows: src="//:0"like here: <img id="myImage" src="//:0">
初始化图像如下：src="//:0"像这里：<img id="myImage" src="//:0">
Edit: as per the comment of Alex below, using
//:0apparently can trigger theonErrorevent of theimg. So beware of this.Edit 2: From comment by Drkawashima: As of Chrome 61
src="//:0"no longer seems to trigger the onError event.
编辑：按照下面亚历克斯的评论，用
//:0明显可以触发onError的事件img。所以要小心这一点。编辑 2：来自Drkawashima 的评论：从Chrome 61 开始，
src="//:0"似乎不再触发 onError 事件。
Other solution
其他解决方案
Alternatively, you can use a very small image until you actually fill the srctag: like this image. With this 'very small image', you would then initialise the tag like so:
或者，您可以使用非常小的图像，直到您真正填充src标签：像这个图像。使用这个“非常小的图像”，您可以像这样初始化标签：
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />
Remove element from DOM
从 DOM 中删除元素
Alternatively, if you simply don't want the element to appear in the DOM, just use some JavaScript:
或者，如果您只是不想让元素出现在DOM 中，只需使用一些 JavaScript：
var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);
(as per this answer, using JavaScript's .remove()function is not recommended, due to poor browser support in DOM 4)
（根据这个答案，.remove()不推荐使用 JavaScript 的函数，因为 DOM 4 中的浏览器支持很差）
Or just use some jQuery:
或者只是使用一些 jQuery：
$("#myObject").remove();
回答by Drkawashima
The most commonly accepted way I know (recommended by CSSTricks etc) is a 1px image in b
我知道的最普遍接受的方式（由 CSSTricks 等推荐）是 b 中的 1px 图像
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> alt="">
It will show up in devtools as a 0B network request, so if you're doing performance monitoring you might be surprised about the number of image requests. But otherwise it's nothing to worry about.
它会在 devtools 中显示为 0B 网络请求，因此如果您正在进行性能监控，您可能会对图像请求的数量感到惊讶。但除此之外没有什么可担心的。
Note: always include an altattribute. otherwise screen readers will read the img url out loud.
注意：始终包含一个alt属性。否则屏幕阅读器会大声读出 img url。
回答by iGidas
Just use a hash symbol #. It's valid value for srcattribute. :)
https://stackoverflow.com/a/28077004/3841049
只需使用哈希符号#。它是src属性的有效值。:)
https://stackoverflow.com/a/28077004/3841049
回答by Dot Net
Use this script to set a default image if src is empty or blank
如果 src 为空或空白，则使用此脚本设置默认图像
$(document).ready(function () {
$('img').each(function () {
if($(this).attr('src')=="") {
$(this).attr('src', 'Images/download.jpg');
}
});
});
