Vue 图片加载失败显示默认图片

方法一:通过onerror属性加载默认图片

bash 复制代码
<img :src="img" :onerror="defaultImg" />

<script>
export default {
    data() {
        return {
            img: '', // 访问图片的ip地址
            defaultImg: `this.src = '${require('@/assets/images/right/default-person.png')}'`, 
        };
    },
}
</script>

方法二:通过@error方法加载默认图片

bash 复制代码
<img :src="img"  @error="handleError" />

export default {
    data() {
        return {
            img: '', // 访问图片的ip地址
            defaultImg: '/R-C.jpg',
        };
    },
    methods: {
        handleError(e) {
            e.target.src = this.defaultImg;
        },
    },
}
</script>
相关推荐
虾球xz4 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇10 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒14 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员29 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐31 分钟前
前端图像处理(一)
前端
程序猿阿伟39 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒40 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express