将图像的src设置为空

Question

我想将一张图片设置为空。通过使用 src="" 的方法，很多人说这可能会导致浏览器出现问题：

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

因此我不确定下面的做法是否会面临与将src设置为空时相同的问题：

<img id="myImage">

由于这种情况下没有src属性。

如果我想最初将图像设置为无内容，我该怎么做？

- user304602

---

因为一开始没有图像，当进程完成时，我会根据进程是否通过放置一张图像。 - user304602

好的，使用 div 并设置其背景图像似乎是一个不错的主意。但是在性能方面，使用 img 或带有背景图像的 div 之间有什么区别？在我的情况下，有一些图像同时加载，并且它们可以是动画 gif，所以应该使用 img 还是 div？div 背景是否兼容动画 gif？ - user304602

Answer 1

最佳解决方案

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

编辑：根据下面Alex的评论，使用//:0 可能会触发img的onError事件。请注意。

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

_{(根据这个答案，由于在DOM 4中浏览器支持不好，不建议使用JavaScript的.remove()函数)}

或者只需使用一些jQuery：

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

---

- Jean-Paul

---

在编程中，使用“//:0”作为“src”会在“img”上触发“onError”事件（至少在Chrome 57版本中是如此）。 - Alex

//:0 真的救了我的命。虽然这是一个内部项目，但我并不在意错误:) 我正在使用jQuery设置attr.src，但无论我做什么，它总是放置了display:none!important。 - Patrice Poliquin

@PatricePoliquin 很高兴听到这个消息。祝你的项目好运。 - Jean-Paul

从Chrome 61开始，src="//:0"似乎不再触发onError事件。 - Drkawashima

在Chrome浏览器中缩放后，该图片显示为损坏的。 - Ronen Festinger

Answer 2

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

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

注意：后续当DevTools将这些列为0字节的网络请求时，不要感到困惑，这只是DevTools的工作方式，所有图片都被列为网络请求。

注：包含alt=""是为了防止屏幕阅读器将src读出来。

- Drkawashima

---

我点赞了它，因为它是一个透明的图像/动态图。这比被接受答案提供的白色图像更加灵活。太好了，谢谢！（你可以在你的回答中提到它） - Vitox

Answer 3

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

- iGidas

---

请检查链接。该方法已过时。 - Emre Türkiş

Answer 4

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

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

- Dot Net