uni-app的image加载失败显示默认图片

2021-04-29 23:16:36

记录下如何设置默认图片,图片地址加载失败的话就显示默认图片

问题

用 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'
},

参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码

评 论:

好文推荐
每天进步一点点~