Как установить изображение по умолчанию, если изображение не существует в s3, используя VUE JS

Question

Я получаю изображение из корзины S3 и отображаю его, используя VUEJS. Я сталкиваюсь с некоторыми трудностями, такими как отображение изображения по умолчанию, если изображение не существует в корзине S3.

Для текста, но как я могу добиться этого с изображением по умолчанию?

Вот мой код

<template>
<div id="book_cover"><sui-image :src="bookCover" @error="imageLoadOnError"></sui-image></div>
<template>

<script>
export default {
   methods:{
       imageLoadOnError(e) {
          e.target.src = "alternative-image-if-not-exist"
      }
   },
   computed:{
   bookCover(){
        if(this.book){
            return this.book.book_cover =  "fetched-image-url.jpg"
        }
   }
}
</script>

Ошибка вывода по-прежнему и отображение поврежденных изображений. Как мне этого добиться? Заранее спасибо!

Answer 1

Я предлагаю vue -progressive-image .

Ваш код должен выглядеть следующим образом, если вы его используете:

<div id="book_cover">
   <progressive-img 
     :src="bookCover"
     :fallback="fallbackImage"
   />
</div>

Это будет быть болезненным, если вы собираетесь иметь дело с событием onError каждого изображения. Вы можете установить заполнители для оптимизации с помощью этого npm.

Answer 2

Я бы предположил, что ваш код будет работать с <img>, но я предполагаю, что ваш код не совместим с <sui-image> (что бы это ни было).

Попробуйте изменить bookCover на альтернативное изображение, но так как это вычисляемое свойство, его нельзя изменить, поэтому вам нужно будет заменить его на простое свойство data.

Или, если вам необходимо иметь вычисляемое свойство, попробуйте что-то вроде:

data() {
  return {
    error: false
  }
},
methods: {
  imageLoadOnError() {
    this.error = true
  }
},
computed: {
  bookCover() {
    // If there is an error use the alt image, otherwise if there
    // is a book then use the book image, otherwise use something else
    return this.error
      ? 'alt-image'
      : this.book
        ? this.book.book_cover
        : 'placeholder-image'

    // Alternatively
    if (this.error) {
      return 'alt-image';
    } else if (this.book) {
      return this.book.book_cover;
    } else {
      return 'something-else';
    }
  }
}