包含没有 src 的图像的有效方法是啥？

Posted 2023-02-22

【中文标题】包含没有 src 的图像的有效方法是啥？

【英文标题】：What's the valid way to include an image with no src?包含没有 src 的图像的有效方法是什么？

【发布时间】：2011-08-12 03:21:40

【问题描述】：

我有一张图片，稍后我将使用 javascript 动态填充 src，但为了方便起见，我希望图片标签在页面加载时存在，但不显示任何内容。我知道<img src='' /> 无效，那么最好的方法是什么？

【问题讨论】：

这是一个相对古老的问题，但值得考虑的是，没有 src 的图像本质上是没有意义的，这就是为什么规范说图像 必须 有一个 src 指向首先是一些嵌入式资源。如果您正在考虑有效性和/或语义，最好完全省略图像并在事后添加它，因为 html 不提供指定稍后将填充数据的占位符图像的方法。

在使用 Mika Tuupola 的延迟加载 jQuery 插件时，它使用了标记 ' '，所以从某种意义上说，你需要指向一个源，但不一定要通过src属性来完成。

您可以使用 div 元素代替它，请参阅此 => ***.com/a/5513934/1395101

【参考方案1】：

这些天恕我直言，对于一个空的 img src，最好的简短、理智和有效的方法是这样的：

<img src="data:," alt>
or
<img src="data:," >

第二个示例显示“替代文本”（在 Chrome 和 IE 中加上损坏的图像图标）。

"data:," 是一个有效的 URI。空媒体类型默认为text/plain。所以它代表一个空的文本文件，相当于"data:text/plain,"

---

OT：所有浏览器都理解纯 alt。您可以省略 ="" ，它是每个 HTML 规范隐含的。

【讨论】：

W3C 验证器检查没有 HTML 错误。没有不必要的要求。 ? 似乎是有效的方法。

最好！还有一件事，如果您希望它在 srcset 中验证，请使用 srcset="data:,x"

这应该是最佳答案。当前的最佳答案是在每次新刷新时向上滚动。

这会导致图像在某些浏览器中中断，显示替代文本而不是实际的“空白”图像。

是的，答案是这样的：“第二个示例显示'替代文本'（在 Chrome 和 IE 中加上损坏的图像图标）。”

【参考方案2】：

基于 Ben Blank 的回答，我在 w3 验证器中验证它的唯一方法是这样的：

<img src="/./.:0" >`

【讨论】：

它会验证，但它会导致 Firefox 中的图像损坏，即使 alt 属性为空。

【参考方案3】：

<img src="invis.gif" />

invis.gif 是一个单像素透明 gif。这不会在未来的浏览器版本中中断，并且自 90 年代以来一直在旧版浏览器中工作。

png 也应该可以，但在我的测试中，gif 是 43 字节，而 png 是 167 字节，所以 gif 赢了。

附言不要忘记 alt 标签，验证器也喜欢它们。

【参考方案4】：

如cmets中写的，这个方法是错误的。

我之前没有找到这个答案，但是根据W3 Specs有效的空src标签将是一个锚链接#。

示例：src="#"、src="#empty"

页面验证成功，没有额外的请求。

【讨论】：

有反对这种方法的论据吗？跨浏览器的情况如何？

我看到 Firefox 和 Chrome 在使用这种方法时都会发出第二个请求，所以我不推荐它。

Firefox、Chrome 发出第二次请求，甚至 JMeter 都会解析 img src，导致页面递归加载（直到达到最大深度）

在 FF 中，如果你想离开页面，你必须点击浏览器的后退按钮两次，因为 url 发生了神秘的变化......

这是完全错误的。任何碰巧读过 cmets 的人 - 不要使用这个

【参考方案5】：

我发现只需将 src 设置为空字符串并向 CSS 添加规则以隐藏损坏的图像图标就可以了。

[src=''] 
    visibility: hidden;

【讨论】：

[ng-src=''] 可见性：隐藏； 如果你在 angularjs 中使用 ng-src 指令

注意，src必须设置为''，不能为undefined。

如果我没记错的话，还是会执行请求

【参考方案6】：

简单地说，像这样：

<img id="give_me_src"/>

【讨论】：

根据the spec，这不是一个好主意：src 属性必须存在，并且必须包含有效的 URL ...

也许它在 chrome 中运行良好，但它会在 html 验证中抛出错误并且它不是 W3 有效的 html...

【参考方案7】：

使用真正空白、有效且高度兼容的 SVG，基于此 article：

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

它的大小默认为 300x150 像素，就像任何 SVG 一样，但您可以在 img 元素默认样式中使用它，因为您在实际实现中可能需要任何情况。

【讨论】：

感谢您更新您的答案，但我怀疑兼容性比其他 data-uri 解决方案更糟糕，因为您使用的 svg 直到 IE9 才兼容。幸运的是，我不得不支持旧版 IE 已经有一段时间了，但它仍然对某些人有用。

但是这不是和本文中的问题一样吗？ dev.mobify.com/blog/data-uris-are-slow-on-mobile。我认为带有 css img[src="about:blank"] opacity: 0 解决方案的 选项是最好的。或者，如果旧浏览器不支持该级别的 CSS 选择器，只需给 img 标签一个类，如“load-in”，或其他东西。更好的是，给它类，使用 JavaScript 交换 data-src，然后为图像设置一个加载函数以使其在加载时淡入。您还可以设置在加载时显示微调器。看起来很专业。

@JordanCarter 当然，如果详细的性能是一个问题。作为旁注，我想说visibility: hidden 比opacity: 0 更适合您建议的属性选择器。

谢谢。这个真的帮助了我。使用其他解决方案时，我在保持不同屏幕尺寸的占位符图像的纵横比时遇到了问题。这适用于任何宽高比的图像。

【参考方案8】：

我建议动态添加元素，如果使用jQuery或其他JavaScript库，这很简单：

http://api.jquery.com/appendTo/ http://api.jquery.com/prependTo/ http://api.jquery.com/html/

还可以查看prepend 和append。否则，如果您有这样的图像标签，并且想要使其验证，那么您可能会考虑使用虚拟图像，例如 1px 透明 gif 或 png。

【讨论】：

+1 这是最好的答案。如果无论如何要动态设置图像源，则应动态添加整个元素。如果在设置 src 之前您不希望它可见，我想不出任何充分的理由为什么该元素应该在此之前存在。

动态添加图片一般比较好，但是增加了改变布局流程的问题。可能需要一个相同大小的空占位符。如果元素是自动调整大小的，有时计算占位符的大小可能会很困难。在这种情况下，我发现嵌入的空白图像是一个更好的选择。

这也可能取决于容器网格是否有固定宽度。如果有，则没有回流

【参考方案9】：

另一种选择是嵌入空白图像。任何适合您目的的图像都可以，但下面的示例编码一个只有 26 个字节的 GIF - 来自http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="    />

根据以下评论进行编辑：

当然，您必须考虑您的浏览器支持要求。不支持 IE7 或更低版本是值得注意的。 http://caniuse.com/datauri

【讨论】：

好主意！然而，对我来说，这会杀死图像元素 - 如果有人需要 img 元素的其他方面来显示，例如背景和边框，试试src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="，它取自我制作的 1px x 1px 透明 gif，我用 Photoshop 推过base64-image.de

您可能需要三思而后行使用数据 URI 内联您的资源：@​​987654324@

此选项的可行性取决于您必须支持的浏览器：caniuse.com/datauri

这是一个透明的 1 像素 PNG：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=

对我有用的透明图片网址 - data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

【参考方案10】：

我已经有一段时间没有这样做了，但我不得不经历一次同样的事情。

<img src="about:blank"  />

是我最喜欢的 - //:0 表示您将尝试在端口 0（tcpmux 端口？）上与源服务器建立 HTTP/HTTPS 连接 - 这可能是无害的，但我宁愿不这样做无论如何做。哎呀，浏览器可能会看到端口为零，甚至不发送请求。但我仍然宁愿不要这样指定，因为这可能不是你的意思。

无论如何，about:blank 的渲染在我测试的所有浏览器中实际上都非常快。我只是把它扔进了 W3C 验证器，它没有抱怨，所以它甚至可能是有效的。

编辑：不要那样做；它不适用于所有浏览器（它会显示一个“损坏的图像”图标，如该答案的 cmets 中所指出的那样）。使用下面的<img src='data:... 解决方案。或者，如果您不关心有效性，但仍想避免对服务器的多余请求，您可以使用不带 src 属性的<img alt="" />。但那是 INVALID HTML，所以请谨慎选择。

显示大量不同方法的测试页面：http://desk.nu/blank_image.php - 提供各种不同的文档类型和内容类型。 - 如下面的 cmets 所述，使用 Mark Ormston 的新测试页面在：http://memso.com/Test/BlankImage.html

【讨论】：

这似乎比让网络层发出错误更干净。

至少你确定一个愚蠢的防火墙不会请求调用端口 0 的权限...

值得一提的是，这会在 Chrome（可能还有其他浏览器）上显示“损坏的图像”图标

这比我想象的还要糟糕——即使使用 html5 文档类型，它似乎也无法在 Safari 或 Chrome 中工作。我有一个测试页面，可以调整页面的 Content-type 和 Doctype，到目前为止，我最喜欢的是：<img /> - 一个 没有 src 属性的图像标签。这是 not 有效的（因此也没有必要将空的 alt 标签放在那里）。我将继续使用它，并将相应地更新我的答案（或删除它）。

我获取了您的测试页面并对其进行了更新，以便在图像无法正常工作时更加明显。旧的空白图像包含在“始终有效”示例中，以及您所看到内容的简要描述：memso.com/Test/BlankImage.html 这让我意识到有效的空白数据 gif 是现代浏览器的唯一可重用选项，其他比旧的空白 gif 图像（旧 IE7 及更低版本仍然需要）

【参考方案11】：

我发现使用：

<img src="file://null">

不会发出请求并正确验证。

浏览器将简单地阻止对本地文件系统的访问。

但在 Chrome 的控制台日志中可能会显示错误，例如：

Not allowed to load local resource: file://null/

【讨论】：

想解释一下否决票？请注意，我不推荐使用这种方法，只是提供一个讨论案例。并且它满足了问题的要求，即正确验证并且不提出其他请求。

【参考方案12】：

我个人使用about:blanksrc 并通过将img 元素的不透明度设置为0 来处理损坏的图像图标。

【讨论】：

@mystrdat：想详细说明为什么它很脏？接受的答案，使用“//：0”仍然给了我损坏的图像图标以及 Firefox 上一个奇怪的永无止境的请求。单像素 base64 png 替代方案，也有很多选票，在使用 作为占位符时给我带来了麻烦，无论是否指定高度和宽度。这是我发现实现目标的最干净的方式，无需任何不必要的请求并通过所有短绒和验证。

以上所有解决方案都非常愚蠢，被接受的一个，我有时间再做一个新的答复。

@mystrdat：我仍然很乐意了解您对此有何看法？

@funkylaundry 我为提出重大索赔和消失而道歉，现在发布我的答案。我也承认我之前没有注意到其他 Data URI 解决方案，我确实同意，但我相信无论如何我的语法更胜一筹。

【参考方案13】：

如果你保持 src 属性为空，浏览器将向当前页面 url 发送请求 如果不需要任何 url，请始终在 src 属性中添加 1*1 透明 img

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

【讨论】：

这在某些浏览器中会显示为一个黑点。

肯定是 IE8，还有旧版本的 Firefox，根据 ***.com/questions/9126105/…

这个 src data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 工作了

【参考方案14】：

虽然没有有效的方法可以省略图像的来源，但有 种来源不会导致服务器命中。我最近遇到了与iframes 类似的问题，并确定//:0 是最佳选择。不，真的！

以// 开头（省略协议）会导致使用当前页面的协议，从而防止 HTTPS 页面中出现“不安全内容”警告。跳过主机名不是必需的，但会使其更短。最后，:0 端口确保无法发出服务器请求（根据规范，它不是有效端口）。

这是我发现的唯一一个在任何浏览器中都没有导致服务器命中或错误消息的 URL。通常的选择——javascript:void(0)——如果在通过 HTTPS 提供的页面上使用，将在 IE7 中导致“不安全内容”警告。任何其他端口都会导致尝试连接服务器，即使是无效地址也是如此。 （有些浏览器会简单地发出无效请求并等待它们超时。）

这在 Chrome、Safari 5、FF 3.6 和 IE 6/7/8 中进行了测试，但我希望它可以在任何浏览器中工作，因为它应该是杀死任何尝试请求的网络层。

【讨论】：

这个答案可能会导致您的防火墙警告您访问端口 0。或者它可能会导致服务器安全日志。建议about:blank 的答案可能是更好的解决方案。

这导致为我显示损坏的图像图标。还有人看到这个吗？我正在使用最新的 Firefox(27)。

这也使 w3c 验证器失败：错误值 //:0 元素 img 上的属性 src：无效主机：空主机。

这不起作用：我有一个 ASP.NET MVC 4 应用程序，其中包含一个名为 clearing 的图片库插件。该插件动态创建图像并将 //:0 放在 src 中，直到实际获取图像。这使我的家庭控制器的索引操作被调用两次。所以要小心。

在 Firefox 38 中，这种方法会触发图像的 onerror 处理程序。