Как обработать ошибку v-img?

Question

[Sport-code]

Всем привет!

Как мне перехватить ошибку 404 (если нет картинки), вместо этого показать картинку, что картинка не загружена?

v-for="(product, index) in currentPageItems"
    :key="index"
  >
     <div class="px-2 pt-2">
           <v-img v-if = "image === true"
                 :src="$hostname + `/uploads/images/goods/${product.imageSrc}`"
                 height="200px" 
                 contain 
                 position='center'
                 v-on:error="onImgError"
            />
           <v-img v-else 
                 class="mt-3 grey light-2" 
                 :src="$hostname + `/uploads/images/nopic.png`"
                 height="200px" 
                 contain 
                 position='center' 
           />
    </div>

Подскажите пожалуйста, если кто-знает.

Answer 1

[0xD34F]

Добавьте элементам currentPageItems булево свойство, которое будет информировать о наличии ошибки. Назначайте src в зависимости от значения этого свойства. Устанавливайте его в true при обработке события error.

https://jsfiddle.net/L5qp2okt/

Comments

[Sport-code]

Спасибо, за код!

Но только здесь мы знаем, что каждая 3я картинка с ошибкой.
А когда с сервера загружаю картинки в product.imageSrc,
а потом в цикле вывожу :src="product.imageSrc об этом не знает,
что есть ли там картинка или нет, он выводит все подмену делал
через computed или выводится все тоже самое или нигде нет картинок (

[Sport-code]

Что-то не то не могу понять
https://codepen.io/anon/pen/bXdNzp?editors=1010

[0xD34F]

Sport-code,

Но только здесь мы знаем, что каждая 3я картинка с ошибкой.

И ЧТО С ТОГО?

Что-то не то не могу понять

Картинки четыре, свойство, отвечающее за ошибку, одно. Один меньше четырёх. Как вы собираетесь с помощью одного булевого свойства управлять четырьмя элементами? Это невозможно. Вы что, не понимаете, что один меньше четырёх?

Изначально error установлен в false, на элементах v-if="error" - то есть, они просто не создаются. Должно быть наоборот - v-if="!error".

[Sport-code]

0xD34F,
Я так понял, что перед выводом нужно получить таблицу с сервера (с картинками), обработать ее в map,
затем в цикле-вывода выводить?
А обработка заключается в том что, допустим у меня 1000 картинок, я должен делать 1000 запросов
на сервер проверять ссылка на картинку не битая, что нагрузка на сервер получается?
А по проще варианта нет, чтобы сервер не нагружать?

[0xD34F]

Sport-code, ни хрена вы не поняли. Вот откуда вы взяли "должен делать 1000 запросов
на сервер"? Нет, серьёзно - ОТКУДА?! Вместо того, чтобы сделать, как я вам показал, какой-то ерундой занялись.

[Sport-code]

Вы написали, что у вас каждая 3 картинка мусор(битая ссылка),
у меня неизвестно какая картинка битая, чтобы это проверить нужно запрос к серверу сделать.
Поэтому я и написал к примеру 1000

[0xD34F]

Sport-code, ещё раз: откуда вы взяли, что надо делать какие-то запросы? Кончайте уже тупить, в моём коде никаких запросов нет.

[Sport-code]

Спасибо, наконец-то опробовал (уезжал), все работает.

Answer 2

[genius_spirit]

v-if = "product.imageSrc"
или
class="mt-3 grey light-2"
:src="product.imageSrc ? `${hostname} + /uploads/images/goods/${product.imageSrc}` : `${hostname} + /uploads/images/nopic.png`"
height="200px"
contain
position='center'
/>

Comments

[Sport-code]

Спасибо за ответ.
Но,
в product.imageSrc там есть ссылка, поэтому всегда будет true,
а файл на сервере удалили.

Не с работает, а пробовал.

Answer 3

[Evgeniy S]

Отловить ошибку загрузки картинки может onerror
https://learn.javascript.ru/onload-onerror#zagruzk...
если этого в компоненте v-img нет, то придется своё лепить.

Comments

[Sport-code]

Отловить то он отловит, а как мне подменить картинку на другую, вот не могу понять?

[Evgeniy S]

1. в :src подменяй картинку если отловил ошибку. можно с помощью computed

[Sport-code]

Я пробовал подмену сделать не получается

[Evgeniy S]

Sport-code, оформи в облачном виде, типа https://codepen.io/ или подобное, посмотрим

[Sport-code]

https://codepen.io/anon/pen/bXdNzp?editors=1010

[Evgeniy S]

Sport-code, кажется вам ниже написали уже решение. попытайтесь его понять.
Чтобы совсем не делать запросов на сервер о недоступности картинки(404), это необходимо проверять на самом сервере и уже там не хранить ссылки на битые картинки. (отдавать json без битых ссылок)