На днях я столкнулся с проблемой, когда изображения для внешних источников не загружаются.
В этом случае я сохранил ссылку на изображение профиля человека в Twitter. Когда пользователь меняет это изображение, оно не отражается автоматически.
Поэтому я решил поискать запасные изображения.
И это оказалось на удивление просто.
Чего мы хотим добиться:
- Загрузить изображение
- Если оно не загружается, показать запасное изображение.
Примечание: В качестве альтернативы вы можете удалить изображение.
HTML на ошибочных обратных изображениях
Давайте создадим пример HTML-эксперимента.
<img
src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-163822.jpeg"
/>
Будет загружена фотография Pixabay с сайта Pexels (сайт стоковых изображений).
Это будет работать отлично, но теперь давайте попробуем разрушить его, случайно добавив несколько чисел к изображению.
<img
src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
/>
В результате мы получим супер раздражающее сломанное изображение.
Что же мы можем сделать, когда это произойдет?
Мы можем использовать атрибут onerror на изображении, чтобы установить обратный ход.
Это работает следующим образом:
<img
src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
onerror="this.onerror=null; this.src='https://images.pexels.com/photos/159868/lost-cat-tree-sign-fun-159868.jpeg'"
/>
Мы используем атрибут onerror, чтобы установить ошибку на null и установить src изображения на fallback.
В нашем случае это фотография пропавшей кошки.
Примечание: Не стоит полагаться на внешние изображения. В идеале вы хотите иметь запасное изображение локально в файловой системе, чтобы оно было надежным запасным вариантом.
Вы можете увидеть это в действии в следующем CodePen.
Первое изображение загружается, а второе — не работает.
Спасибо, что прочитали, и давайте подключаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.