html - 将图像 src 设置为空

Question

我想将图像设置为空。src=""许多人说这样做会给浏览器带来问题：

http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

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

<img id="myImage">

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

因此，如果我想最初将图像设置为空，我能做的最好的事情是什么？

Answer 1

最佳解决方案

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

编辑：根据下面亚历克斯的评论，使用//:0显然可以onError触发img. 所以要小心这个。

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

---

其他解决方案

或者，您可以使用非常小的图像，直到您真正填充src标签：like this image。使用这个“非常小的图像”，您可以像这样初始化标签：

<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);

_{（根据这个答案.remove()，不推荐使用 JavaScript 的功能，因为 DOM 4 中的浏览器支持很差）}

或者只是使用一些 jQuery：

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

---

Answer 2

我知道的最普遍接受的方式（由CSSTricks推荐）是 1px 图像

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

它将在 devtools 中显示为 0B 网络请求，因此如果您正在进行性能监控，您可能会对图像请求的数量感到惊讶。但除此之外，没什么好担心的。

注意：您会注意到我包含了该alt属性，但它被设置为一个空值。你应该这样做！始终包含alt或屏幕阅读器会大声朗读 img 网址。

Answer 3

只需使用井号#。src它是属性的有效值。:) https://stackoverflow.com/a/28077004/3841049

Answer 4

如果 src 为空或空白，请使用此脚本设置默认图像

$(document).ready(function () {
   $('img').each(function () {
       if($(this).attr('src')=="") {
          $(this).attr('src', 'Images/download.jpg');
       }
   });
});