什么's有效的方法来包括一个图像没有src?

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

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

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

虽然没有有效的方法来忽略图像的源，但有是源不会导致服务器故障。我最近遇到了类似的__abc0问题，并确定//:0是最佳选择。不,真的!

以//开头(省略协议)导致使用当前页面的协议，防止HTTPS页面中的“不安全内容”警告。没有必要跳过主机名，但可以使其更短。最后，:0端口确保不能发出服务器请求(根据规范，这不是一个有效的端口)。

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

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

我已经有一段时间没有这样做了，但我不得不经历一次同样的事情。

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

是我最喜欢的——//:0暗示你将尝试在端口0 (tcpmux端口?)上与原始服务器建立HTTP/HTTPS连接——这可能是无害的，但我宁愿不管怎样都不这样做。哎呀，浏览器可能只看到端口0，甚至不发送请求。但我还是不希望你这么说因为这可能不是你想说的。

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

编辑:不要那样做;它不能在所有浏览器上工作(它会显示一个“破碎的图像”图标，正如在这个答案的评论中指出的那样)。使用下面的<img src='data:...解决方案。或者如果你不关心有效性，但仍然想避免对服务器的多余请求，你可以使用不带src属性的<img alt="" />。但这是无效的 HTML，所以要小心选择。

测试页面显示了一大堆不同的方法:http://desk.nu/blank_image.php -提供各种不同的doctypes和内容类型。 -正如在下面的评论中提到的，使用Mark Ormston的新测试页面:http://memso.com/Test/BlankImage.html

另一种选择是嵌入一个空白图像。任何符合你的目的的图像都可以，但是下面的例子从http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever编码了一个只有26字节的GIF

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

根据下面的评论编辑:

当然，您必须考虑您的浏览器支持需求。不支持IE7或更低版本是值得注意的。http://caniuse.com/datauri

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

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

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

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

我发现使用:

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

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

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

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

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

基于文章，使用一个真正空白、有效且高度兼容的SVG:

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

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

简单来说，就像这样:

<img id="give_me_src"/>

我发现，简单地将src设置为一个空字符串，并在CSS中添加一个规则来隐藏损坏的图像图标就可以了。

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

<img src="invis.gif" />

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

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

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

建立本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。空媒体类型默认为text/plain。所以它表示一个空文本文件，等价于"data:text/plain,"

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

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