uni-app的image加载失败显示默认图片
记录下如何设置默认图片，图片地址加载失败的话就显示默认图片
# 问题
用 uni-app 开发前端时，图片比较大、网络差或者图片资源已经不存在，就会导致 image 无法显示图片，而呈现出来空白，影响用户体验。
# 解决方法
通过文档说明我们可以得知，有以下事件：
image 组件文档
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
@error | HandleEvent | 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'} | ||
@load | HandleEvent | 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |
所以可以在 image 图片加载发生错误的时候显示默认图片：
<view v-for="(app,i) in officeApp" :key="i" class="jn-com-part">
...
<view v-if="app.app_list.length>0" class="uni-grid-9">
<view v-for="(item,index) in app.app_list" :key="index">
<view class="uni-grid-9-ico">
<view class="icon-box-lin">
<image class="app-icon" @error="imageError($event, index, i)" :src="item.icon" mode="aspectFill" />
</view>
</view>
</view>
</view>
...
</view>imageError(e, index, i) {
this.officeApp[i]['app_list'][index]['icon'] = '/static/image/other/app-icon.png'
},# 参考资料
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-04-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录