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>
相关推荐
Harriet嘉16 分钟前
解决Chrome 140以上版本“此扩展程序不再受支持,因此已停用”问题 axure插件安装问题
前端·chrome
FuckPatience22 分钟前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
Kingsdesigner26 分钟前
从平面到“货架”:Illustrator与Substance Stager的包装设计可视化工作流
前端·平面·illustrator·设计师·substance 3d·平面设计·产品渲染
一枚前端小能手36 分钟前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
屿小夏38 分钟前
JSAR 开发环境配置与项目初始化全流程指南
前端
微辣而已39 分钟前
next.js中实现缓存
前端
北城以北88881 小时前
Vue-- Axios 交互(二)
javascript·vue.js·交互
Dcc1 小时前
纯 css 实现前端主题切换+自定义方案
前端·css
Zuckjet_1 小时前
第 7 篇:交互的乐趣 - 响应用户输入
前端·javascript·webgl
我总是词不达意1 小时前
vue3 + el-upload组件集成阿里云视频点播从本地上传至点播存储
前端·vue.js·阿里云·elementui