Laravel 如果s3中没有使用VUE JS的图像，如何设置默认图像

我正在从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>

导出默认值{
方法：{
图像加载错误（e）{
e、 target.src=“如果不存在替代图像”
}
},
计算：{
封面（）{
如果（这本书）{
返回this.book.book\u cover=“fetched image url.jpg”
}
}
}

---

输出仍然错误，显示的图像已损坏。我将如何实现这一点？提前谢谢！

我假设您的代码可以与

一起工作，但我猜您的代码与

不兼容（无论是什么）

尝试将

bookCover

更改为备选图像，但由于它是一个计算属性，因此无法修改，因此您需要将其更改为简单的

data

属性

或者，如果必须具有computed属性，请尝试以下操作：

data（）{
返回{
错误：false
}
},
方法：{
imageLoadOnError（）{
this.error=true
}
},
计算：{
封面（）{
//如果出现错误，请使用alt图像，否则，如果出现错误，请使用alt图像
//是一本书，然后使用书的形象，否则使用其他东西
返回此错误
？“alt图像”
：这本书
这本书的封面
：“占位符图像”
//或者
if（此错误）{
返回'alt image'；
}else if（这本书）{
归还这本书的封面；
}否则{
返回“其他东西”；
}
}
}

我建议

如果正在使用，代码应如下所示：

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

---

如果你要处理每幅图像的一个错误事件，这将是一件痛苦的事情。你可以使用此npm设置占位符进行优化。

我尝试了你的代码，先生，但仍然不起作用。我还尝试将标记更改为正常标记，它可以工作。是设计响应的语义UI。谢谢你的回答。谢谢！好的，我刚刚检查过对于语义UI图像组件，它不支持

错误

事件，因此使用该组件时运气不佳。