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

Question

我有一个图像,我稍后将使用javascript动态填充src,但为了方便起见,我希望图像标记存在于pageload但不显示任何内容.我知道<img src='' />是无效的,那么最好的方法是什么？

Answer 1

虽然没有有效的方法来省略图像的来源,但有些来源不会导致服务器命中.我最近有一个与iframes 类似的问题,并决心//:0成为最佳选择.不完全是!

从//(省略协议)开始会导致使用当前页面的协议,从而防止HTTPS页面中出现"不安全内容"警告.跳过主机名不是必需的,但会缩短它.最后,一个端口:0确保无法进行服务器请求(根据规范,它不是有效的端口).

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

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

Answer 2

另一种选择是嵌入空白图像.任何适合您目的的图像都可以,但以下示例编码的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

Answer 3

我建议动态添加元素,如果使用jQuery或其他JavaScript库,则非常简单:

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

也看看prepend和append.否则,如果你有这样的图像标签,并且你想让它验证,那么你可以考虑使用虚拟图像,例如1px透明gif或png.

Answer 4

我有一段时间没有这样做,但我必须经历过同样的事情.

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

是我最喜欢的 - 这//:0意味着你会尝试在端口0(tcpmux端口？)上建立到源服务器的HTTP/HTTPS连接 - 这可能是无害的,但我宁愿不做.哎呀,浏览器可能会看到端口为零,甚至没有发送请求.但我仍然宁愿不这样说,那可能不是你的意思.

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

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

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

Answer 5

如今，恕我直言，对于空img src来说，最好的简短，理智和有效的方法是这样的：

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

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

URI "data:,"有效。空的媒体类型默认为text/plain。因此它代表一个空的文本文件，等效于"data:text/plain,"

OT：所有浏览器都能理解alt。您可以忽略=""，每个HTML规范都隐含了它。

Answer 6

正如评论中所写,这种方法是错误的.

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

示例:src="#",src="#empty"

页面验证成功,没有额外的请求.

Answer 7

如果你保持src属性为空,浏览器会向当前页面发送请求url总是在src属性中添加1*1透明img如果不想要任何url

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

Answer 8

我发现使用:

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

不会提出请求并正确验证.

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

但是,Chrome中的控制台日志中可能会显示错误,例如:

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

Answer 9

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

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

Answer 10

基于以下文章,使用真正空白,有效且高度兼容的SVG :

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

它的大小默认为任何SVG的300x150px,但您可以在img元素默认样式中使用它,就像在实际实现中的任何情况一样.

Answer 11

建立Ben Blank的答案,我在w3验证器中验证的唯一方法是:

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