将图像 src 设置为空

我想将图像设置为无。通过做 src="" 许多人说它可能会给浏览器带来问题：

所以我不确定下面是否会遇到与将 src 设置为空相同的问题：

 <img id="myImage">

因为在这种情况下没有 src 属性。

所以如果我想最初将图像设置为空，我能做的最好的是什么？

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

最佳解决方案

按如下方式初始化图像： src="//:0" 就像这里： <img id="myImage" src="//:0">

编辑：根据下面 Alex 的评论，使用 //:0 显然可以触发 onError 事件 img 。所以要小心这一点。

_编辑 2 ：来自 Drkawashima 的评论：从 Chrome 61 src="//:0" 似乎不再触发 onError 事件_。

其他解决方案

或者，您可以使用非常小的图像，直到您实际填充 src 标签：像这张图片一样。使用这个“非常小的图像”，您可以像这样初始化标签：

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />

从 DOM 中移除元素

或者，如果您只是不想让元素出现在 DOM 中，只需使用一些 JavaScript：

 var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);

（根据这个答案，不推荐使用 JavaScript 的 .remove() 函数，因为浏览器对 DOM 4 的支持很差）

或者只是使用一些 jQuery：

 $("#myObject").remove();

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

使用 1px 透明编码图像是一种可接受的解决方案（ CSSTricks 推荐）

 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">

请注意，我包括一个 alt 设置为空字符串，这是有意让屏幕阅读器跳过这个空图像，但如果你不包括 alt 属性，一些屏幕阅读器将读取 src 大声说出来。

PS：稍后当您使用 DevTools 并看到这些图像显示为 0 字节网络请求时，您可能会感到困惑，但不要惊慌 - 这就是 DevTools 的工作方式。

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