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

165

我有一个图像，我会动态填充与src稍后用javascript，但为了方便我想图像标记存在页面加载但只是不显示任何东西。我知道<img src='' />是无效的，所以最好的方法是什么？什么是包含没有src的图像的有效方法？

2011-04-25 jhchen

这是一个比较古老的问题，但它是值得考虑的是与图像没有src本质上是没有意义的，这就是为什么规范说image *必须有一个src指向一些嵌入式资源。如果你正在考虑的有效性和/或语义，你是通过完全省略图像和事后添加的，因为HTML不提供一种方式来指定将与以后的数据来填充一个占位符图像更好的服务。 – BoltClock 2016-02-16 09:22:14

在使用米卡Tuupola的延迟加载jQuery插件，它使用标记“”，所以从某种意义上讲，你需要指向一个来源，但它并没有要与src属性来完成。 – iWillGetBetter 2016-10-05 06:51:32

209

虽然没有有效的方法来省略图片的来源，但是来源，不会导致服务器点击。我最近与iframe s有类似的问题，并确定//:0是最好的选择。不完全是！

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

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

这已经在Chrome，Safari 5，FF 3.6和IE 6/7/8中测试过，但我期望它可以在任何浏览器，因为它应该是杀死任何尝试请求的网络层。

来源

2011-04-25 05:51:21

+11

这个答案会导致你的防火墙警告你访问端口0的例子。或者它可能会导致服务器安全日志。建议'about：blank'的答案可能是更好的解决方案。 – 2013-01-22 15:47:24

这造成了一个破碎的图像图标为我显示。任何人看到这个？我正在使用最新的Firefox（27）。 – dmikester1 2014-02-11 20:00:20

这也失败了w3c验证器：错误值：0：对于元素上的属性src img：无效主机：空主机。 – ysrb 2014-08-07 14:28:30

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

还看prepend和append。否则，如果你有一个这样的图像标签，并且你想要验证它，那么你可能会考虑使用一个虚拟图像，比如1px透明gif或者png。

来源

2011-04-25 05:34:41

+1这是最好的答案。如果图像源是动态设置的，则应该动态添加整个元素。如果你不希望它在src设置之前可见，我想不出有什么好的理由说明为什么元素应该在那之前。 – 2014-05-19 16:06:53

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

<img src="about:blank" alt="" />

是我的最爱 - 在//:0一个暗示，你会尝试对端口零原始服务器的HTTP/HTTPS连接（tcpmux端口？） - 这可能是无害的，但我而不是反正。哎呀，浏览器可能会看到端口为零，甚至不发送请求。但是，如果这可能不是您的意思，我宁愿不要这样指定它。

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

编辑：不要这样做;它不适用于所有的浏览器（它会显示一个'破碎的图像'图标，正如在这个答案的评论中指出的那样）。使用下面的<img src='data:...解决方案。或者，如果您不关心有效性，但仍希望避免对服务器的多余请求，则可以执行<img alt="" />而不使用src属性。但是，这是无效 HTML所以仔细挑选。

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

来源

2012-12-29 20:16:24 Uberbrady

这似乎比让网络层发出错误更清晰。 – 2013-01-22 15:41:02

至少你确定一个愚蠢的防火墙不会要求允许调用端口0 ... – 2013-01-22 15:46:11

值得一提的是，这显示在Chrome浏览器（也可能是其他浏览器）上的“破碎的图像”图标 – user568458 2013-08-28 14:58:56

160

另一种方法是嵌入空白图像。适合你的目标会做任何图像，但下面的例子编码GIF，这只是26个字节 - 从http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

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

编辑基于以下注释：

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

来源

2013-01-01 23:47:59 Isius

好主意！然而，对我而言，这会杀死图像元素 - 如果任何人需要'img'元素的其他方面来显示例如背景和边框，请尝试'src =“data：image/gif; base64，R0lGODlhAQABAIAAAP /// wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw ==”'这取自1px x 1px透明gif我让Photoshop透过http：//www.base64- image.de/ – user568458 2013-08-28 15:06:10

您可能需要考虑使用数据URI内联您的资源：http://www.mobify.com/blog/data-uris-are-slow-on-mobile/ – shawnjan 2013-09-01 19:08:39

此选项的可行性取决于您必须在哪些浏览器上支持：http：//caniuse.com/datauri – 2013-11-06 00:37:55

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

来源

2014-05-03 17:13:38 Miguel

现在，这是肮脏的！ – mystrdat 2014-12-10 14:40:41

@mystrdat：谨慎地阐述为什么它很脏？接受的答案，使用“//：0”仍然给了我一个破碎的图像图标加上一个奇怪的永不停止的请求在Firefox上。使用作为占位符的单像素base64 png替代品也有很多投票，给我带来了麻烦，无论是否指定高度和宽度。这是我找到的最干净的方式，可以在没有任何不必要的请求并通过所有短消息和验证的情况下实现我的目标。 – Miguel 2015-02-12 19:12:35

以上所有解决方案都非常愚蠢，包括一个可以接受的解决方案，一旦我获得更多时间，我会做出新的答复。 – mystrdat 2015-02-12 21:17:02

，如果你继续src属性空的浏览器会发送请求到当前页面的URL 随时添加在src属性1 * 1透明IMG如果不希望任何URL

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

来源

2015-01-03 11:17:05

这将在某些浏览器中显示为黑点。 – tomasz86 2015-07-26 18:31:33

哪些浏览器？ – 2015-07-28 06:26:59

当然IE8和老版本的Firefox根据http://stackoverflow.com/questions/9126105/blank-image-encoded-as-data-uri#comment33438865_19891866 – tomasz86 2015-07-29 08:57:23

写在注释，这种方法是错误的。

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

~~示例：src="#"，src="#empty"~~

~~页验证成功并没有额外的要求制成。~~

来源

2015-01-21 21:17:58 iGidas

工作我怀疑这个，所以我检查了我的服务器日志，你是正确的。我猜想浏览器试图将主页面解释为图片并且失败，但这对于查看控制台日志消息的开发人员来说很重要。 – Liam 2015-02-09 15:43:35

有没有反对这种方法的争论？它如何跨浏览器？ – tremby 2015-03-13 19:20:18

+16

我已经看到Firefox和Chrome在使用这种方法时发出第二个请求，所以我不会推荐它。 – Marius 2015-04-17 14:13:26

我发现，使用：

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

不会让一个请求，正确验证。

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

但也有可能，例如显示在控制台登录Chrome的一个错误：

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

来源

2015-03-20 04:34:17 tenkod

谨慎解释downvote？请注意，我不推荐使用这种方法只是提供一个讨论的案例。它能够满足问题的要求，正确验证并且不会提出其他请求。 – tenkod 2015-08-28 18:15:41

使用一个真正的空白，有效和高度兼容SVG，在此基础上article：

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

与SVG一样，它的默认大小为300x150像素，但您可以在img元素的默认样式中使用该元素，正如您在实际实现中可能需要的那样。

来源

2016-05-26 00:11:10 mystrdat

感谢您更新您的答案，但是我怀疑它的兼容性比其他数据 - uri解决方案更糟糕，因为您使用的svg在IE9之前不兼容。幸运的是，这是一段时间，因为我不得不支持传统的IE浏览器，但它仍然与一些人有关。 – funkylaundry 2016-06-07 10:35:13

它应该以IE9的方式工作。 – mystrdat 2016-06-07 12:53:04

但是，这是否会遇到与本文中相同的问题？ http://dev.mobify.com/blog/data-uris-are-slow-on-mobile/。我在考虑使用css img [src =“about：blank”] {opacity：0}解决方案的选项是最好的。或者，如果旧版浏览器不支持CSS级别的选择器，只需给img标签添加一个类似“load-in”的类，或者其他的东西。更好的是，给它一个类，使用JavaScript来交换数据-Src，然后设置一个加载函数给图像，使其在加载时淡入淡出。您还可以设置一个微调器在加载时显示。看起来很专业。 – 2016-09-17 13:41:55

简单地说，就像这样：

<img id="give_me_src"/>

来源

2016-09-08 07:30:31 anmml

根据[规范]（https://dev.w3.org/html5/spec-preview/the-img-element.html#attr-img-src）不是一个好主意：_src属性必须存在，并必须包含一个有效的URL ... _ – 2016-10-16 19:17:26

@MichaelLitvin它在Chrome中运行良好 – anmml 2016-10-18 19:22:43

也许它在Chrome中运行良好，但它**将**在HTML验证中抛出错误，它不是W3有效的HTML ... – EhsanT 2016-11-25 12:38:40

我发现，简单地设置在src为空字符串，并添加规则，以你的CSS隐藏断开的图像图标工作得很好。

[src=''] { 
    visibility: hidden; 
}

来源

2016-09-16 21:35:09

[ ng-src =''] { visibility：hidden; } 如果您在angularjs中使用ng-src指令 – 2018-01-31 20:17:41

<img src="invis.gif" />

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

PNG应太，但在我的测试中，GIF为43个字节，PNG为167个字节，因此GIF赢了。

p.s.不要忘记alt标签，验证者也喜欢它们。

来源

2017-07-05 12:38:16 franki

大厦关闭本·布兰克的回答，我得到这个在W3的验证验证的唯一办法是，像这样：

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

来源

2017-10-05 13:49:49

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

回答

相关问题