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

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

Answer 1

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

从// （忽略协议）开始导致使用当前页面的协议，从而防止HTTPS页面中的“不安全内容”警告。 跳过主机名是没有必要的，但使其缩短。 最后，端口:0确保服务器请求不能被创build（根据规范，它不是一个有效的端口）。

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

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

Answer 2

另一种select是embedded一个空白图像。 任何适合你的目的的图像都可以，但是下面的例子编码一个只有26个字节的GIF – 从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

我build议dynamic添加元素，如果使用jQuery或其他JavaScript库，则很简单：

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

也看prepend和append 。 否则，如果你有一个像这样的图像标签，并且你想要validation，那么你可能会考虑使用一个虚拟的图像，如1像素的透明GIF或PNG。

Answer 4

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

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

是我最喜欢的 – //:0意味着你将尝试在端口0（tcpmux端口？）上与原始服务器build立HTTP / HTTPS连接 – 这可能是无害的，但是我宁愿不要做任何事情。 哎呀，浏览器可能会看到端口为零，甚至不发送请求。 但是，我宁愿不要这样指定，这可能不是你的意思。

不pipe怎样，在我testing的所有浏览器中， about:blank的渲染实际上都非常快。 我只是把它扔到W3C的validation器，它没有抱怨，所以它甚至可能是有效的。

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

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

Answer 5

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

我以前没有find这个答案，但根据W3规范有效的空src标签将是一个锚链接# 。

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

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

Answer 6

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

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

Answer 7

我发现使用：

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

将不会提出请求并正确validation。

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

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

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

Answer 8

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

Answer 9

我发现只需将src设置为一个空string，并添加一个规则到你的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"

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

Answer 11

简单地说，像这样：

 <img id="give_me_src"/> 

Answer 12

 <img src="invis.gif" /> 

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

PNG也应该工作，但在我的testing中，gif是43个字节，PNG是167个字节，所以gif赢了。

ps不要忘记alt标签，像他们一样的validation器。

Answer 13

根据Ben Blank的回答，我在W3validation器中validation的唯一方法就是这样：

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