🐛 Мы все знаем, что сломанные изображения не выглядят хорошо, и они дают очень плохой пользовательский опыт.
👉 Я работал над проектом и вместо того, чтобы показывать 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”