此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
我们推荐您在任何使用图片场景的地方，都优先考虑使用这个小巧，精致而实用的组件。
注意：
由于在nvue下，u-image名称被uni-app官方占用，在nvue页面中请使用u--image名称，在vue页面中使用u--image或者u-image均可。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
配置图片的width宽和height高，以及src路径即可使用。
<template> <u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image> </template> <script> export default { data() { return { src: 'https://cdn.uviewui.com/uview/album/1.jpg' } } } </script>
copy
#裁剪模式
通过mode参数配置填充模式，此模式用法与uni-app的image组件的mode参数完全一致，详见：Image(opens new window)
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></u--image>
copy
#图片形状
- 通过
shape参数设置图片的形状，circle为圆形，square为方形 - 如果为方形时，还可以通过
radius属性设置圆角值
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u--image>
copy
#懒加载
注意：此功能只对微信小程序、App、百度小程序、字节跳动小程序有效，默认开启。
<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true"></u-image>
copy
#加载中提示
图片加载过程中，为加载中状态(默认显示一个小图标)，可以通过loading自定义插槽，结合uView的u-loading组件，实现加载的动画效果。
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg"> <template v-slot:loading> <u-loading-icon color="red"></u-loading-icon> </template> </u--image>
copy
#加载错误提示
图片加载失败时，默认显示一个错误提示图标，可以通过error自定义插槽，实现个性化的提示方式。
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg"> <view slot="error" style="font-size: 24rpx;">加载失败</view> </u--image>
copy
#淡入动画
组件自带了加载完成时的淡入动画效果：
- 通过
fade参数配置是否开启动画效果 - 通过
duration参数配置动画的过渡时间，单位ms
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" :fade="true" duration="450"></u--image>
copy
#事件冒泡
默认情况下，组件是允许内部向外事件冒泡的，因为很多情况下，我们都希望点击图片，同时图片所在的父元素的点击事件也能触发。
如果您想避免事件冒泡，那么您可以在组件外面嵌套一个view，同时给它加上@tap.stop即可。
<!-- 点击图片将不会触发clickHandler --> <view @tap="clickHandler"> <view @tap.stop> <u--image src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image> </view> </view>
