Question

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

Answer 1

虽然没有有效的方法可以省略图像的来源，但是来源，不会导致服务器命中。我最近遇到了与iframe类似的问题，并确定//: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库，则非常简单：

还要查看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属性。但那是 INVALID HTML所以请仔细挑选。

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

Answer 5

正如评论中所写，这种方法是错误的。

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

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

~~页面成功验证，没有提出额外请求。~~

Answer 6

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

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

Answer 7

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

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

Answer 8

我发现使用：

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

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

浏览器只会阻止对本地文件系统的访问。

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

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

Answer 9

根据此article：

，使用真正空白，有效且高度兼容的SVG

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

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

Answer 10

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

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

Answer 11

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

Answer 12

uint8_t

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

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

P.S。不要忘记一个alt标签，验证器也是如此。

Answer 13

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

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

它在所有浏览器中显示“替代文本”（如果有）（在Chrome和IE中显示为残破的图像图标）。

OT：顺便说一句，所有浏览器都能理解普通的alt。您可以省略=""，它是HTML规范所隐含的。

数据URI有效。空的媒体类型默认为text/plain。因此，它代表一个空的.txt文件，相当于data:text/plain,

Answer 14

简单地说，就像这样：

SqlConnection

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

14 个答案: