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

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

虽然没有有效的方法来忽略图片的来源,但是有些来源不会导致服务器点击。 我最近有一个与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层。

另一种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

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

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

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

 <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

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

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

例如: src="#"src="#empty"

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

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

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

我发现使用:

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

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

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

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

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

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

我发现只需将src设置为一个空string,并添加一个规则到你的CSS来隐藏破碎的图像图标就行了。

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

根据这篇文章 ,使用一个真正的空白,有效和高度兼容的SVG:

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

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

简单地说,像这样:

 <img id="give_me_src"/> 
 <img src="invis.gif" /> 

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

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

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

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

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