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

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

当前回答

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

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

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

其他回答

<img src="invis.gif" />

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

PNG也可以工作，但在我的测试中，GIF是43字节，PNG是167字节，所以GIF赢了。

另外，不要忘记Alt标签，验证器也喜欢它们。

简单来说，就像这样:

<img id="give_me_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规范中是隐式的。

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

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

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

我知道这可能不是您正在寻找的解决方案，但它可能有助于提前向用户显示图像的大小。同样，我不完全理解最终目标，但这个网站可能会有所帮助:https://via.placeholder.com

它很容易使用，并允许显示所需大小的空图像。同样，我理解您不想展示任何东西，但这可能也是一个优雅的解决方案。

 <img src="https://via.placeholder.com/300" style='width: 100%;' />

推荐文章