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

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

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

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

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

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

export default {
    name: 'testImgError',
    data() {
        return {
            img: '', // 访问图片的ip地址
            defaultImg: require('@/assets/images/right/default-person.png'),
        };
    },
    methods: {
        handleError(e) {
            e.target.src = this.defaultImg;
        },
    },
}
</script>
相关推荐
m0_7482336437 分钟前
C++开发中的常用设计模式:深入解析与应用场景
javascript·c++·设计模式
fruge40 分钟前
TypeScript 基础类型与接口详解
javascript·ubuntu·typescript
今天没有盐1 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
AAA阿giao1 小时前
JavaScript 中的变量声明:var、let 与 const 深度解析
javascript·笔记
云枫晖1 小时前
Webpack系列-Entry入口
前端·webpack
mustfeng1 小时前
VCS & Verdi 2023安装
java·服务器·前端
Mintopia2 小时前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙2 小时前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户6600676685392 小时前
从 var 到 let/const:JavaScript 变量声明的进化之路
javascript
用户433845375692 小时前
Promise深度解析,以及简易版的手写实现
前端