Next JS как отловить ошибку если картинка возвращает 404 ошибку?

Question

[Игорь Васильев]

Здравствуйте.

Представьте себе ситуацию, у вас есть сайт, который принимает данные из БД, в базе данных есть информация о картинках в виде ссылок, но так получилось, что менеджер удалил в ручную картинки из папки и прихватил лишнее. Ссылка - есть, картинки - нет. То есть возвращается не undefined, а ссылка, Next JS ругается на это, консоль красная из-за 404 ошибки.

Вопрос:
Как отловить подобного рода ошибку в <img src="?" />
если путь к картинке возвращает 404 ошибку, показать картинку по умолчанию. На обычном html это будет просто иконка с альтом, говорящая о том что там есть изображение. Next JS же это JSX, и порой такие ошибки ломают страницы, особенно если берутся данные из вне, по API или через запросы.

Кто с подобным сталкивался, как это исправить ?

Answer 1

[Егор Живагин]

Вы можете повесить слушатель onError на img, он срабатывает в случае любой ошибки при загрузке. Нужно будет посмотреть на объект ошибки, по нему как-то понять, что это именно 404 и передать в src этой же картинки ссылку на картинку по умолчанию

Comments

[Игорь Васильев]

Хорошо, благодарю, этого я не нашёл в документации к Next JS. Возможно это у React JS?
Попробую это свойство. Там ещё есть Image от next, пока не юзаю, так как не решил куда буду складывать миниатюры.

[Егор Живагин]

Игорь Васильев, вообще, error - стандартное браузерное событие у любого загружаемого контента (картинки, видео, скрипты, …) . Next в этом плане практически ни на что не влияет, загрузка картинки всё равно будет происходить в браузере

[Игорь Васильев]

Егор Живагин, да под ночь уже тупить начинаю, и плохо соображаю. Ваш ответ является решением, спасибо, я теперь знаю как это реализовать. )