uniapp实现加载图片失败显示占位图

本文介绍三种网络图片加载失败时展示占位图的方法:导入第三方插件、监听image标签@error事件及使用双image标签。适用于解决图片地址错误、网络问题导致的加载失败情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

平常在项目中,我们会经常需要有加载网络图片的功能,但是存在图片地址问题、网络问题等导致图片加载失败,需要展示一个占位图,所以我这里总结了三种办法,仅供大家参考,写的不好大家见谅。

一、导入第三方插件,本人没有使用过,所以不知道质量如何,大家有兴趣可以去详细研究下(传送门

二、监听image标签的@error事件进行占位图的显示,这里我直接贴代码,大家看看逻辑即可明白。

注意:这里有点不好的就是一开始显示的都是空白的,只有图片加载成功或者失败后才会显示正常图片还是占位图

data里面的一些初始化数据

data() {
            return {
                placeholderImage:'/static/logo.png',//占位图
                dataList: [
                    {"icon":"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yun_小胖次

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值