HTML img标签可以有多个src属性吗？

Question

就像视频标签如何提供多个源属性一样，因此mp4视频可以回退到ogg视频，我想让svg图像回到png图像。

Answer 1

在提出问题时，这是不可能的。但现在可以这样做：

​<picture>
    <source srcset="mdn-logo.svg" type="image/svg+xml">
    <img src="mdn-logo.png" alt="MDN">
</picture>

请参阅docs on MDN

Answer 2

不，它不能。

但是，您可以使用CSS背景图像伪造它。

为避免显示损坏的图像字形，您可能根本不想使用<img>标记，而是使用两个具有不同背景图像的嵌套元素。 （请注意，这会损害可访问性）

Answer 3

这里有一篇帖子可能有所帮助：Fallback image and timeout - External Content. Javascript

它提供了一些JavaScript选项。

使用背景图片效果很好，但您必须知道图片的尺寸。如果你不知道，那可能会很棘手。

Answer 4

只需将svg包含为<object>并将<img>放在其中。

<object data='image.svg'>
    <img src='image.png'>
</object>

那应该有用。只有在无法显示svg时才会显示png图像。

Answer 5

虽然这可能不是你想要的，但值得一提的是你可以指定different resolutions for retina displays：

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
                                 image-3x.png 3x, image-4x.png 4x">

Answer 6

简单回答......不。