Свойство src HTML <img> тега

HTML <img> тег

Определение и использование

Обязательное src Свойство определяет URL изображения.

Есть два способа определить URL изображения в свойстве: src Указать URL в свойстве:

1. Абсолютный URL - Ссылка на внешние изображения, хранящиеся на других сайтах. Например:

src="https://www.codew3c.com/images/img_girl.jpg"

Внимание:Внешние изображения могут быть защищены авторскими правами. Если вы не получили разрешения на использование их, это может нарушить закон о著作权ах. Кроме того, вы не можете контролировать внешние изображения; они могут突然 быть удалены или изменены.

2. Относительный URL - Ссылка на изображение, хранящееся на сайте.

В этом случае URL не включает домен. Если URL не начинается с косой черты, он будет относителен к текущей странице. Например:

src="img_girl.jpg".

Если URL начинается с косой черты, он будет относителен к домену. Например:

src="/images/img_girl.jpg".

Совет:Лучше всего использовать относительные URL. Если вы измените доменное имя, это не вызовет разрыва связи.

Внимание:Если браузер не может найти изображение, он будет показывать иконку битого ссылки и текст alt.

Совет:Чтобы упорядочить хранение документа, создатели обычно хранят файлы изображений в отдельной папке, и обычно называют эти директории "pics" или "images" и тому подобное. В онлайн-курсах CodeW3C.com наши инженеры хранят большинство常用的 изображений в папке с именем "i", "i" является аббревиатурой от "images", что позволяет максимально упростить путь.

Пример

В следующем примере мы вставляем на страницу изображение тюльпанов, снятое инженерами CodeW3C.com в Шанхайском цветочном порту, имя файла которого "eg_tulip.jpg", хранится в папке "i" на сервере. Это исходный код:

<img src="/i/eg_tulip.jpg" />

Эффект кода выше:


Попробуйте сами

Совет:Вы можете попробовать это в нашем онлайн-инструменте тестированияПопробуйте самиЕсли вы измените имя файла в примере на "eg_chinarose.jpg", вы увидите фотографию розы. Вот так:

Исходный код:

<img src="/i/eg_chinarose.jpg" />

Эффект кода выше:

Синтаксис

<img src="URL">

Значение атрибута

Значение Описание
URL

Определяет URL изображения.

Возможные значения:

  • Абсолютный URL - указывает на другой сайт (например, src="http://www.example.com/image.gif")
  • Относительный URL - указывает на файл в сайте (например, src="image.gif")

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

HTML <img> тег