@Sport-code

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

Всем привет!

Как мне перехватить ошибку 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>


Подскажите пожалуйста, если кто-знает.
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Добавьте элементам currentPageItems булево свойство, которое будет информировать о наличии ошибки. Назначайте src в зависимости от значения этого свойства. Устанавливайте его в true при обработке события error.

https://codepen.io/anon/pen/OKVJjE?editors=1010
Ответ написан
Пригласить эксперта
Ответы на вопрос 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'
/>
Ответ написан
evgensenin
@evgensenin
Yii2 || Laravel, vue & nuxt
Отловить ошибку загрузки картинки может onerror
https://learn.javascript.ru/onload-onerror#zagruzk...
если этого в компоненте v-img нет, то придется своё лепить.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы