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

What's the valid way to include an image with no src?

提问by jhchen

I have an image that I will dynamically populate with a src later with javascript but for ease I want the image tag to exist at pageload but just not display anything. I know <img src='' />is invalid so what's the best way to do this?

我有一个图像，稍后我将使用 javascript 动态填充 src，但为了方便起见，我希望图像标签存在于页面加载但不显示任何内容。我知道<img src='' />是无效的，那么最好的方法是什么？

回答by Ben Blank

While there is no valid way to omit an image's source, there aresources which won't cause server hits. I recently had a similar issue with iframes and determined //:0to be the best option. No, really!

虽然没有有效的方法可以省略图像的来源，但有些来源不会导致服务器命中。我最近在iframes 上遇到了类似的问题，并决定//:0成为最佳选择。不完全是！

Starting with //(omitting the protocol) causes the protocol of the current page to be used, preventing "insecure content" warnings in HTTPS pages. Skipping the host name isn't necessary, but makes it shorter. Finally, a port of :0ensures that a server request can't be made (it isn't a valid port, according to the spec).

以//（省略协议）开头会导致使用当前页面的协议，从而防止 HTTPS 页面中出现“不安全内容”警告。跳过主机名不是必需的，但会使其更短。最后，:0确保无法发出服务器请求的端口（根据规范，它不是有效端口）。

This is the only URL which I found caused no server hits or error messages in any browser. The usual choice — javascript:void(0)— will cause an "insecure content" warning in IE7 if used on a page served via HTTPS. Any other port caused an attempted server connection, even for invalid addresses. (Some browsers would simply make the invalid request and wait for them to time out.)

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

This was tested in Chrome, Safari 5, FF 3.6, and IE 6/7/8, but I would expect it to work in any browser, as it should be the network layer which kills any attempted request.

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

回答by Isius

Another option is to embed a blank image. Any image that suits your purpose will do, but the following example encodes a GIF that is only 26 bytes - from http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

另一种选择是嵌入空白图像。任何适合您目的的图像都可以，但以下示例编码只有 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="" />

Edit based on comment below:

根据以下评论进行编辑：

Of course, you must consider your browser support requirements. No support for IE7 or less is notable. http://caniuse.com/datauri

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

回答by j.j.

These days IMHO the best short, sane & valid way for an empty img src is like this:

这些天恕我直言，对于空的 img src 最好的简短、理智和有效的方法是这样的：

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

The second example displays "Alternative Text" (plus broken-image-icon in Chrome and IE).

第二个示例显示“替代文本”（以及 Chrome 和 IE 中的损坏图像图标）。

"data:,"is a valid URI. An empty media-type defaults to text/plain. So it represents an empty text file and is equivalent to "data:text/plain,"

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

---

---

OT：所有浏览器都理解普通altalt. 您可以省略=""=""，它是每个 HTML 规范隐式的。

回答by nonopolarity

I recommend dynamically adding the elements, and if using jQuery or other JavaScript library, it is quite simple:

我建议动态添加元素，如果使用 jQuery 或其他 JavaScript 库，则非常简单：

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

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

also look at prependand append. Otherwise if you have an image tag like that, and you want to make it validate, then you might consider using a dummy image, such as a 1px transparent gif or png.

也看看prepend和append。否则，如果您有这样的图像标签，并且希望对其进行验证，那么您可以考虑使用虚拟图像，例如 1px 透明 gif 或 png。

回答by Uberbrady

I haven't done this in a while, but I had to go through this same thing once.

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

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

Is my favorite - the //:0one implies that you'll try to make an HTTP/HTTPS connection to the origin server on port zero (the tcpmux port?) - which is probably harmless, but I'd rather not do anyways. Heck, the browser may see the port zero and not even send a request. But I'd still rather it not be specified that way when that's probably not what you mean.

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

是我最喜欢的 - 这//:0意味着您将尝试在端口零（tcpmux 端口？）上与源服务器建立 HTTP/HTTPS 连接 - 这可能是无害的，但无论如何我都不想这样做。哎呀，浏览器可能会看到端口 0 甚至不发送请求。但我仍然宁愿不以这种方式指定，因为这可能不是您的意思。

Anyways, the rendering of about:blankis actually very fast in all browsers that I tested. I just threw it into the W3C validator and it didn't complain, so it might even be valid.

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

Edit: Don't do that; it doesn't work on all browsers (it will show a 'broken image' icon as pointed out in the comments for this answer). Use the <img src='data:...solution below. Or if you don't care about validity, but still want to avoid superfluous requests to your server, you can do <img alt="" />with no src attribute. But that is INVALIDHTML so pick that carefully.

编辑：不要那样做；它不适用于所有浏览器（如本答案的评论中指出的那样，它会显示“损坏的图像”图标）。使用<img src='data:...下面的解决方案。或者，如果您不关心有效性，但仍想避免对服务器的多余请求，则可以不<img alt="" />使用 src 属性。但这是无效的HTML，所以请仔细选择。

Test Page showing a whole bunch of different methods: http://desk.nu/blank_image.php- served with all kinds of different doctypes and content-types.- as mentioned in the comments below, use Mark Ormston's new test page at: http://memso.com/Test/BlankImage.html

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

回答by iGidas

As written in comments, this method is wrong.

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

I didn't find this answer before, but acording to W3 Specsvalid empty srctag would be an anchor link #.

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

Example: src="#", src="#empty"

示例：src="#",src="#empty"

Page validates successfully and no extra request are made.

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

回答by Shawn Walton

I found that simply setting the src to an empty string and adding a rule to your CSS to hide the broken image icon works just fine.

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

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

回答by Prathamesh Rasam

if you keep src attribute empty browser will sent request to current page url always add 1*1 transparent img in src attribute if dont want any url

如果您将 src 属性保留为空，浏览器会将请求发送到当前页面 url 如果不需要任何 url，则始终在 src 属性中添加 1*1 透明 img

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

回答by tenkod

I've found that using:

我发现使用：

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

will not make a request and validates correctly.

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

The browsers will simply block the access to the local file system.

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

But there might be an error displayed in console log in Chrome for example:

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

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

回答by mystrdat

Use a truly blank, valid and highly compatible SVG, based on this article:

根据这篇文章，使用真正空白、有效且高度兼容的 SVG ：

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

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

It will default in size to 300x150px as any SVG does, but you can work with that in your imgelement default styles, as you would possibly need in any case in the practical implementation.

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