Рубрики
Без рубрики

Обработка ошибок связывания изображения в Vue.js

Исследуя использование события @error на изображениях. Теги от Vue, JavaScript.

🐛 Мы все знаем, что сломанные изображения не выглядят хорошо, и они дают очень плохой пользовательский опыт.

👉 Я работал над проектом и вместо того, чтобы показывать Alt Text, если изображение сломано, я хотел показать какое-то другое альтернативное изображение. Для этого сначала мне нужно было проверить, сломано ли изображение, затем показать альтернативное изображение.

👀 Я искал решения, и некоторые люди делали это, укладывая сломанные изображения, которые также хороши Но это не было решение, которое я искал.

🙌 Я узнал о событии @Error на изображениях, и это оказалось действительно полезным.

👨💻 Давайте рассмотрим это с примером кода:

😕 Без @error.

Если мы не используем @error И просто предоставьте текст Alt, он выглядит уродливым.

 

😍 с @Error

Используя @error Событие на изображениях, мы можем показать альтернативное изображение, если исходное изображение сломано или не загружено по какой-либо причине. @ошибка Будет ли только позвонить в предоставленный метод, если есть какая-либо ошибка в загрузке исходного изображения.

 

imgurlalt это метод, который устанавливает SRC изображения для альтернативного изображения.

setAltImg(event) { 
    event.target.src = "working-image.jpg" 
} 

💯 вывод

Мне очень понравилось достичь то же самое в 3-5 строках с @error и избегание написания дополнительных 10-15 строк CSS.

👋 сказать привет

Я довольно активен на Twitter Вы можете следовать за мной там или посетить мой Блог Чтобы узнать больше обо мне.

Оригинал: “https://dev.to/zahidjabbar/image-binding-error-handling-in-vue-js-1pdp”