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

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

虽然没有有效的方法来忽略图像的来源，但是有些来源不会导致服务器命中。我最近与iframes 遇到了类似的问题，并决定//:0将其作为最佳选择。不完全是！

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

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

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

另一种选择是嵌入空白图像。任何适合您目的的图像都可以，但是以下示例对GIF进行了编码，该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

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

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

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

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

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

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

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

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

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

我的最爱- //:0一个暗示您将尝试在零端口（tcpmux端口？）上建立到原始服务器的HTTP / HTTPS连接-可能无害，但我还是不愿意这样做。哎呀，浏览器可能看到端口零，甚至没有发送请求。但是，我仍然宁愿不以这种方式指定它，因为那可能不是您的意思。

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

编辑：不要那样做；并非在所有浏览器上都起作用（它会显示“残破的图像”图标，如该答案的注释中所指出）。使用<img src='data:...下面的解决方案。或者，如果您不关心有效性，但仍然希望避免对服务器的多余请求，则可以不<img alt="" />使用src属性。但这是无效的 HTML，因此请谨慎选择。

测试页显示了许多不同的方法：http : //desk.nu/blank_image.php-提供各种不同的doctype和content-types。-如以下评论中所述，请使用Mark Ormston的新测试页，网址为：http ://memso.com/Test/BlankImage.html

如评论中所写，此方法是错误的。

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

范例：src="#"，src="#empty"

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

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

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

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

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

我发现使用：

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

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

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

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

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

根据本文，使用真正空白，有效和高度兼容的SVG ：

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

与任何SVG一样，它的大小默认为300x150px，但是您可以在img元素默认样式中使用它，因为在实际实现中无论如何都需要。

基于Ben Blank的答案，我在w3验证器中进行验证的唯一方法是：

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

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

<img src="invis.gif" />

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

png也应该工作，但是在我的测试中，gif为43字节，而png为167字节，因此gif胜出了。

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

简单地说，像这样：

<img id="give_me_src"/>