Может ли 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>

См. документы по MDN

Answer 2

Здесь есть пост, который может помочь: Резервное изображение и время ожидания - Внешний контент. Javascript

Он предлагает несколько вариантов JavaScript.

Использование фонового изображения работает хорошо, но вы должны будете знать, каковы размеры ваших изображений. Если вы не знаете, то это может быть сложно.

Answer 3

Нет, не может.

Однако вы можете подделать его, используя фоновые изображения CSS.

Чтобы избежать отображения поврежденного глифа изображения, вы можете вообще не использовать тег <img> и вместо этого использовать два вложенных элемента с разными фоновыми изображениями. (Обратите внимание, что это повредит доступности)

Answer 4

Хотя это, вероятно, не то, что вы хотели, стоит отметить, что вы можете указать различные разрешения для дисплеев сетчатки :

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

Answer 5

Просто включите svg как <object> и поместите в него <img>.

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

Это должно работать. Изображение png будет отображаться только тогда, когда невозможно отобразить svg.

Answer 6

Простой ответ ... Нет.