Работая над итоговой оценкой на этой неделе, я столкнулся с проблемой, о которой никогда раньше не задумывался: что происходит, когда src изображения поврежден?

Это не мило. Кроме того, если вы используете какое-либо форматирование или стили на своей странице, это может действительно испортить все.

Для моей домашней оценки одна из задач требовала от меня перебора некоторых данных и создания «списка команды», в котором у каждого члена команды была карточка с изображением профиля, а также их именем, титулом и биографией. Я хотел, чтобы все изображения были одинакового размера, что прекрасно работало с CSS, пока… я не понял, что один из URL-адресов источника изображения не работает. На экране появилась иконка сломанного изображения doom и испортила всю мою тяжелую работу и форматирование.

Что делать бедному программисту? Здесь я собираюсь пройти через процесс исправления этой маленькой проблемы в ваших приложениях React!

Шаг 1. Выберите изображение по умолчанию

Выберите образ по умолчанию, который заменит SRC, если ваш образ поврежден! Вы можете выбрать что угодно: силуэт головы, знак «ой, это изображение сломано» или даже корги с мордой посреди ломтика хлеба:

С таким лицом, кого волнует, что изображение испорчено, верно?

Шаг 2. Убедитесь, что вы всегда включаете альтернативное свойство

Это общеизвестно, но я просто хотел напомнить вам всегда включать свойство alt во все используемые вами теги img. Это важно не только для ситуаций, когда изображение повреждено, но и для программ чтения с экрана, чтобы сделать ваше приложение более доступным. Если вы не знакомы, вот как это выглядит:

<img src="www.dog-pics.com" alt="funny picture of a corgi">

Шаг 3: Создайте функцию для вызова изображения по умолчанию

Теперь мы собираемся создать функцию внутри нашего компонента React, которая изменит SRC на выбранное нами изображение по умолчанию.

const addDefaultImg = ev => {
   ev.target.src = "default-dog.jpg"
}

Эта функция, addDefaultImg, принимает событие (тег изображения) и изменяет src на изображение по умолчанию, которое вы уже выбрали. Довольно просто!

Шаг 4: Используйте onError для вызова функции

Чтобы вызвать эту функцию, мы собираемся использовать свойство onError, которое React имеет в своей структуре, которое вызывается каждый раз, когда возникает ошибка при рендеринге тега (то есть, когда src не работает). Проверьте это:

<img src="www.dog-pics.com" alt="funny picture of a corgi" onError={addDefaultImg}>

Примечание: я использовал все функциональные компоненты. Если вы используете компонент класса, обязательно используйте this.addDefaultImg.

И это все! Супер быстрый способ добавить изображение по умолчанию на случай, если одно из ваших сломается, и вы не сможете быстро его поймать. Удачного кодирования!