我有一个图像,我将动态填充src稍后与javascript,但为了方便,我希望图像标签存在于页面加载,但只是不显示任何东西。我知道<img src= " />是无效的,那么最好的方法是什么?


当前回答

根据本文,使用真正空白、有效且高度兼容的SVG:

src = " +:形象/ svg xml数据;charset = utf8, 3Csvg % 20xmlns = http://www.w3.org/2000/svg’排% 3C / svg %排”

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

其他回答

根据Ben Blank的回答,我在w3验证器中得到这个验证的唯一方法是这样的:

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

在我看来,这些天最好的简短,理智和有效的空img src的方式是这样的:

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

第二个例子显示“Alternative Text”(加上Chrome和IE中的broken-image-icon)。

"data:,"是一个有效的URI。空媒体类型默认为文本/纯。所以它表示一个空文本文件,相当于“data:text/plain”,

OT:所有浏览器都能理解纯alt。你可以省略="",这在HTML规范中是隐式的。

另一种选择是嵌入一个空白图像。任何符合你的目的的图像都可以,但是下面的例子编码了一个只有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

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

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

简单来说,就像这样:

<img id="give_me_src"/>