УЛУЧШЕННАЯ ОТРИСОВКА ИЗОБРАЖЕНИЙ В REACT-ПРИЛОЖЕНИИ

IMPROVED IMAGE RENDERING IN REACT APPLICATION

Maxim Beryanov

Student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

Одно из решений, которое приходится принимать веб-разработчику при проектировании сайта, касается выбора способа загрузки изображений в состав веб-страниц. Достаточно оптимальным способом является использование HTML-тега <img> с указанием значения атрибута src. В данной статье предлагается рассмотреть правильный принцип отрисовки изображений.

ABSTRACT

One of the decisions a web developer has to make when designing a site is how to load images into web pages. A fairly optimal way is to use the HTML <img> tag with src attribute value. This article proposes to consider the correct principle of rendering images.

Ключевые слова: веб, изображение, отрисовка, HTML, React.

Keywords: web, image, rendering, HTML, React.

Для отрисовки изображений в дереве элементов DOM используется тег под названием img [1], принимающий в себя в основном два главных атрибута – src и alt. Однако, если передаваемый путь к файлу изображения в src невалиден, то тег image в таком случае не выдаст правильного результата – произойдет сбой и отобразится пустое изображение с заданным значением из атрибута alt.

Можно предположить простой вариант заполнения значения атрибута src через использование оператора || (или), если желаемое значение нулевое или неопределенное, и передачу пути до изображения-заглушки (рисунок 1).

Рисунок 1. Опциональное значение изображения-заглушки

Тем не менее, данный подход не решает проблему того, что, в целом, может быть передан неправильный путь до изображения. Чтобы учесть этот момент, небходимо, зная тот факт, что всякий раз, когда какое-либо изображение не загружается, то активируется событие onError, использовать это событие для обновления значения src до изображения-заглушки (рисунок 2).

Вместо того, чтобы напрямую добавить необязательное упоминание изображения-заглушки, мы можем предоставить обработчик события onError, который делает аналогичное действие. Следовательно, вызывается такое действие исключительно по возникновению ошибочной ситуации, то есть в момент передачи несуществующего пути до изображения. Конечный результат примера передачи двух правильных путей до изображения и третьего неправильного можно увидеть на рисунке 3.

Рисунок 2. Установка значения пути до изображения

Рисунок 3. Конечный результат отрисовки изображений

Таким образом, данный подход решает как проблему передачи неинициализированного значения, так и передачи неправильного значения в атрибут src тега img. Как мы видим из примера, отрисовка изображения-заглушки происходит неявно из вызова метода onError [2], который также является атрибутом упомянутого тега, через изменение состояния хука [3].

Список литературы:

1. Тег <img> [Электронный ресурс] URL: http://htmlbook.ru/html/img (дата обращения: 20.12.2022).
2. Загрузка ресурсов [Электронный ресурс] URL: https://learn.javascript.ru/onload-onerror (дата обращения: 20.12.2022).
3. React Hooks [Электронный ресурс] URL: https://reactjs.org/docs/hooks-overview (дата обращения: 20.12.2022).