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 图片加载发生错误的时候显示默认图片：

代码语言：javascript复制

<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>

代码语言：javascript复制

imageError(e, index, i) {
    this.officeApp[i]['app_list'][index]['icon'] = '/static/image/other/app-icon.png'
},

# 参考资料

• image组件

error event height image load

0 人点赞