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

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

当前回答

在我看来，这些天最好的简短，理智和有效的空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规范中是隐式的。

其他回答

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

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

示例:src="#"， src="#empty"

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

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

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

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

我建议动态添加元素，如果使用jQuery或其他JavaScript库，它是相当简单的:

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

再看看prepend和append。否则，如果你有一个这样的图像标签，你想让它有效，那么你可以考虑使用一个虚拟的图像，如1px透明gif或png。

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

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

我发现使用:

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

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

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

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

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

推荐文章