Question

我有一个简单的v-for循环。在内部，我有一个具有样式背景img的div。如果我的图片不存在，如何设置默认的背景图片网址

<div v-for="company in companies">
    <div class="company-img tooltip-target b-link" 
        :style="{ 'background-image': 'url(' + '/src/static/img/companies/' + 
        company.code.toLowerCase() + '.png' + ')' }">
    </div>
</div>

如果公司图片不存在，我想设置backgroudn-image：url（/static/img/companies/default.png'

Answer 1

您将需要@error vue事件，该事件基本上是JavaScript onerror，可在给定图像URL失败时用于加载备用图像。

<div v-for="company in companies">
    <div class="company-img tooltip-target b-link" >
      <img  @error="onImageLoadFailure($event)" :src="'/src/static/img/companies/' + company.code.toLowerCase() + '.png'" />
    </div>
</div>

内部方法

export default {
    methods: {
      onImageLoadFailure (event) {
        event.target.src = '/static/img/companies/default.png'     
      }
    }
}

更新：

如果country.code对象不存在，则将:src更改为

:src="'/src/static/img/companies/' + company.code.toLowerCase() + '.png'|| '' "

Answer 2

通常，这种类型的操作留给服务器，因为客户端将不知道是否存在远程文件。

想到的一种可能的解决方案是，在构建页面时，调用服务器以检索有关公司的信息，包括图像的URL。然后，您可以使用该结果来填充背景图像样式。

Vue.js更改背景图片网址（如果图片不存在）

2 个答案: