将图像 src 设置为空

Posted 2023-03-05

【中文标题】将图像 src 设置为空

【英文标题】：Setting an image src to empty

【发布时间】：2013-10-08 04:52:31

【问题描述】：

我想将图像设置为空。通过src=""，很多人说这会给浏览器带来问题：

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

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

<img id="myImage">

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

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

【问题讨论】：

因为最初没有图像，当过程完成时，我根据过程通过或失败放置图像。

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

【参考方案1】：

最佳解决方案

初始化图片如下：src="//:0"likehere:<img id="myImage" src="//:0">

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

编辑 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="" />

source

---

从 DOM 中移除元素

或者，如果您只是不希望元素出现在 DOM 中，只需使用一些 javascript：

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

_{（根据this answer，不推荐使用JavaScript的.remove()函数，因为DOM 4中浏览器支持较差）}

或者只是使用一些 jQuery：

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

---

【讨论】：

不要使用 # 作为来源。欲了解更多信息：***.com/a/28077004/3841049

使用 "//:0" 作为src 触发img 上的onError 事件（至少在Chrome 57 版本中）

//:0 显然救了我的命。不关心错误，因为这是一个内部项目:) 我通过 jQuery 设置 attr.src 但它总是放置一个 display:none!important 我做过的事情。

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

这会在放大和缩小后在 chrome 中显示损坏的图像。

【参考方案2】：

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

【讨论】：

请检查链接。此方法已过时。

【参考方案3】：

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

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

【参考方案4】：

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

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

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

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

【讨论】：

我赞成它，因为它是透明的图像/gif。这比接受答案中提供的白色图像灵活得多。太好了，谢谢！ （您可以在回答中提及）