HTMLImageElement: свойство src

Свойство HTMLImageElement src, которое отражает атрибут HTML src, определяет изображение, которое должно отображаться в элементе <img>.

При указании только одного изображения, а не набора изображений, из которых браузер выбирает наилучшее соответствие для размера области просмотра и плотности пикселей, атрибут src — это строка, определяющая URL требуемого изображения. Его можно задать как в самом HTML с помощью атрибута src, так и программно, установив свойство элемента src.

Если вы используете атрибут srcset для предоставления нескольких вариантов изображений для различных плотностей пикселей, URL, указанный атрибутом src используется одним из двух способов:

• в качестве резервного варианта для браузеров, которые не поддерживают srcset.
• в качестве эквивалента для указания изображения в srcset с множителем размера 1x; то есть изображение, заданное src используется на экранах с низкой плотностью (например, типичных экранах с разрешением 72 DPI или 96 DPI).

Кроме того, если вы используете src вместе с обоими атрибутами sizes (или соответствующим атрибутом sizes) и атрибутом srcset, чтобы выбрать изображение на основе размера области просмотра, атрибут src используется только в качестве резервного для браузеров, которые не поддерживают sizes и srcset; в противном случае он вообще не используется.

HTML

<img
  src="grapefruit-slice-332-332.jpg"
  width="160"
  alt="Slices of grapefruit, looking yummy." />

Результат

При использовании набора изображений с помощью свойства srcset, атрибут src служит либо резервным вариантом для старых браузеров, либо изображением 1x размера.

HTML

Результат

При использовании выбора изображения на основе области просмотра из набора изображений, также указав свойство sizes, свойство src служит резервным вариантом для использования в браузерах, которые не поддерживают выбор на основе области просмотра. Браузеры, которые поддерживают выбор на основе области просмотра, проигнорируют src в данной ситуации.

HTML

Результат