Зображення

Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Зображення можна легко включити в HTML-документ за допомогою тегу <img>.

• src - обов'язковий атрибут. Його значенням є шлях до розташування зображення. Шлях може бути абсолютним та відносним;
• alt - обов'язковий атрибут. Задає альтернативний текст, який може бути виведений, якщо зображення не може бути відрендерено;
• width та height - задають розмір зображення у пікселях. Без цих атрибутів зображення буде відображено в оригінальному розмірі.

Атрибут alt

Ми робимо опис зображення інформативним та змістовним. Це допомагає описати зображення для людей з вадами зору або тих, хто не може його побачити. Таким чином, браузер прочитає атрибут alt, і користувач зможе зрозуміти, чому ми маємо саме це зображення.

Уявімо собі наступний приклад. У нас є джерело про кінні перегони. Ми хочемо показати, як спортсмени готуються до перегонів.

Поганим значенням для атрибута alt буде:

Хорошим значенням для атрибута alt буде:

Атрибут src

Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказівки розташування файлу зображення.

Абсолютний шлях

Вказує повну URL-адресу файлу зображення на веб-сервері. Наприклад:

Це означає, що файл зображення знаходиться за посиланням https://example.com/images/image.jpg в інтернеті. Будь-хто може отримати доступ до зображення за цим посиланням.

Будь ласка, ознайомтеся з наступним реальним прикладом у CodeSandbox нижче:

Примітка

Щоб переглянути структуру папок файлів, перетягніть повзунок на лівій стороні інтерфейсу CodeSandbox. У верхньому лівому куті ви побачите кнопку у вигляді бургера з трьома смужками. Натиснувши на цю кнопку, ви перейдете до організації файлових папок.

Відносний шлях

Вказує розташування файлу зображення відносно поточного документа. Наприклад:

Це означає, що файл image.jpg знаходиться в каталозі images.

Будь ласка, перевірте реальний приклад, наведений у CodeSandbox нижче. Ви побачите папку images, яка містить файл sun.png.

Примітка

Якщо підсумувати різницю між відносними та абсолютними шляхами, то абсолютний шлях - це фактичне посилання, за яким будь-хто може отримати доступ до зображення. З іншого боку, відносний шлях - це посилання у контексті вашого власного проекту. Він посилається на локальне зображення і шлях, до якого може отримати доступ будь-хто у проекті.