Работая над итоговой оценкой на этой неделе, я столкнулся с проблемой, о которой никогда раньше не задумывался: что происходит, когда 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
.
И это все! Супер быстрый способ добавить изображение по умолчанию на случай, если одно из ваших сломается, и вы не сможете быстро его поймать. Удачного кодирования!