Vue.js项目中,当图片无法显示时则显示默认图片

使用require将图片进入,写法如下:

data: () => ({logo: 'this.src="' + require('../assets/img.png') + '"'})

注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了。

然后在img的onerror方法中调用

<img v-bind:src="userData.photo" :onerror="logo" class="img-box4">

在v-bind标签中,单引号' '引用的内容作为字符串存在;双引号" "引用的内容作为变量/表达式存在,可以进行运算。

原文地址:https://www.cnblogs.com/web-chuanfa/p/10497246.html