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>
相关推荐
OEC小胖胖19 分钟前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->1 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim1 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端2 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头3 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz3 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子3 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边3 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua3 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js