HTML img 标签可以有多个 src 属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2623287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can an HTML img tag have multiple src attributes?
提问by Jason Christa
Much like how the video tag can provide multiple source attributes so an mp4 video can fall back to an ogg video, I would like to get an svg image to fall back to an png image.
就像视频标签如何提供多个源属性以便 mp4 视频可以回退到 ogg 视频一样，我想要一个 svg 图像回退到一个 png 图像。
采纳答案by Armstrongest
There's a post here that might help: Fallback image and timeout - External Content. Javascript
这里有一篇文章可能会有所帮助：Fallback image and timeout - External Content。Javascript
It offers a few javascript options.
它提供了一些 javascript 选项。
Using a background image works well, but you will have to know what the dimensions of your images are. If you don't know then it may be tricky.
使用背景图像效果很好，但您必须知道图像的尺寸是多少。如果你不知道，那么它可能会很棘手。
回答by Konstantin Smolyanin
At the time of the question it wasn't possible. But now it is OK to do like this:
在提出问题时，这是不可能的。但是现在可以这样做：
?<picture>
<source srcset="mdn-logo.svg" type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>
See docs on MDN
查看MDN 上的文档
回答by SLaks
No, it cannot.
不，它不能。
However, you can fake it using CSS background images.
但是，您可以使用 CSS 背景图像来伪造它。
To avoid displaying the broken image glyph, you might want to not use an <img>tag at all and instead use two nested elements with different background images. (Note that that would hurt accessibility)
为避免显示损坏的图像字形，您可能根本不想使用<img>标签，而是使用具有不同背景图像的两个嵌套元素。（请注意，这会损害可访问性）
回答by Spadar Shut
Just include the svg as <object>and put <img>inside of it.
只需包含 svg as<object>并放入<img>其中。
<object data='image.svg'>
<img src='image.png'>
</object>
That should work. The png image will only be shown when it's impossible to display svg.
那应该工作。只有在无法显示 svg 时才会显示 png 图像。
回答by Nacho Coloma
Though this is probably not what you wanted, it's worth mentioning that you can specify different resolutions for retina displays:
尽管这可能不是您想要的，但值得一提的是，您可以为 Retina 显示器指定不同的分辨率：
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">
回答by Taylor Satula
Simple answer... No.
简单的回答...不。
