Может ли тег HTML img иметь несколько атрибутов src?

Как и тег видео может предоставить несколько атрибутов источника, поэтому видео mp4 может вернуться к видео ogg, я хотел бы получить изображение svg, чтобы вернуться к png-изображению.

Ответ 1

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

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

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

Ответ 2

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

Однако вы можете подделать его с помощью фоновых изображений CSS.

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

Ответ 3

Во время вопроса это было невозможно. Но теперь все нормально:

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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