laravel - 如果使用VUE JS在s3中不存在图像，如何设置默认图像

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

我以为您的代码可以与<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';
    }
  }
}