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>
相关推荐
拉不动的猪几秒前
回顾vue中的Props与Attrs
前端·javascript·面试
Jerry36 分钟前
使用 Material 3 在 Compose 中设置主题
前端
耶啵奶膘42 分钟前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹44 分钟前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
生擒小朵拉1 小时前
STM32添加库函数
java·javascript·stm32
tuokuac1 小时前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼1 小时前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少2 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.2 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者2 小时前
web 网页数据传输处理过程
前端