Атрибут src тега <img> — адреса файлу зображення
Обов'язковий атрибут src задає URL зображення, який буде завантажувати зображення на веб-сторінку. Найбільш популярні файли в форматі GIF, PNG і JPEG.
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
Коли веб-сторінка завантажується, браузер отримує зображення з веб-сервера і вставляє його в сторінку. Тому переконайтеся, що зображення насправді залишалося в тому ж місці, по відношенню до веб-сторінки, інакше ваші відвідувачі отримають несправний значок посилання. Значок несправного посилання відображається, якщо браузер не може знайти зображення.
автор: с3с
Синтаксис
<img src=”URL”>Атрибут src може отримувати єдине значення:
-
URL -
URL зображення.
- Абсолютний URL — вказує на інший веб-сайт (наприклад, src= "http://www.example.com/image.gif");
- Відносний URL — вказує на файл в межах веб-сайту (наприклад, src ="image.gif").
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Робочий src, вбудований data: і два типові способи його зламати
HTML
<p>Файл на місці — картинка показується:</p>
<img width="200" height="80" alt="Синій прямокутник із написом src"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80'%3E%3Crect width='200' height='80' fill='%230172ad'/%3E%3Ctext x='100' y='48' fill='%23fff' text-anchor='middle' font-family='sans-serif' font-size='20'%3Esrc%3C/text%3E%3C/svg%3E">
<p>Шлях відносний — на іншій адресі сторінки він показує вже не туди:</p>
<img src="img/foto.jpg" width="200" height="80" alt="Файл не знайдено: відносний шлях">
<p>Той самий файл, але з іншим регістром імені — на Linux-сервері це інший файл:</p>
<img src="/img/Foto.JPG" width="200" height="80" alt="Файл не знайдено: інший регістр">CSS
img {
border: 1px dashed #b0b0b0;
background: #f6f6f6;
vertical-align: top;
}
p {
margin: 0 0 6px;
}
p + img {
margin-bottom: 18px;
}HTML
<html>
<head>
<title>img</title>
<meta charset="utf-8">
</head>
<body>
<div>
<p>Зображеня завантажено правильно</p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Альтернативний текст"/>
</div>
<hr>
<div>
<p>Помилка під час завантаження:</p>
<img src="data:image/png;base64,ZЗЛАМАНО" alt="Альтернативний текст"/>
</div>CSS
div{
text-align:center;
}Коментарі
Коментарів ще немає — будьте першим!