当在UniApp中使用图片时，可以通过<image>标签将图片显示在页面上。这个标签可以指定src属性来引用图片，并且可以通过mode属性来设置图片的显示模式。除此之外，还可以利用@click事件来实现图片的点击事件。在编写代码时，要注意引用图片的路径和处理图片的点击事件，以及适配不同屏幕尺寸的情况。UniApp中的图片使用相对简单，下面的博客将详细介绍UniApp中图片的使用方法以及相关注意事项。
基本使用：
<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>
剪切模式:
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></u--image>
图片形状:
- 通过
shape参数设置图片的形状，circle为圆形，square为方形 - 如果为方形时，还可以通过
radius属性设置圆角值
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u--image>
懒加载：
注意：此功能只对微信小程序、App、百度小程序、字节跳动小程序有效，默认开启。
<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true"></u-image>
加载中提示：
图片加载过程中，为加载中状态(默认显示一个小图标)，可以通过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>
加载错误提示：
图片加载失败时，默认显示一个错误提示图标，可以通过error自定义插槽，实现个性化的提示方式。
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg"> <view slot="error" style="font-size: 24rpx;">加载失败</view> </u--image>
淡入动画：
组件自带了加载完成时的淡入动画效果：
- 通过
fade参数配置是否开启动画效果 - 通过
duration参数配置动画的过渡时间，单位ms
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" :fade="true" duration="450"></u--image>
事件冒泡：
默认情况下，组件是允许内部向外事件冒泡的，因为很多情况下，我们都希望点击图片，同时图片所在的父元素的点击事件也能触发。
如果您想避免事件冒泡，那么您可以在组件外面嵌套一个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>
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| src | 图片地址，强烈建议使用绝对或者网络路径 | String | - | - |
| mode | 裁剪模式，见上方说明 | String | aspectFill | - |
| width | 宽度，单位任意，如果为数值，默认单位px | String | Number | 300 | - |
| height | 高度，单位任意，如果为数值，默认单位px | String | Number | 225 | - |
| shape | 图片形状，circle-圆形，square-方形 | String | square | square |
| radius | 圆角，默认单位px | String | Number | 0 | - |
| lazyLoad | 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 | Boolean | true | - |
| showMenuByLongpress | 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 | Boolean | true | - |
| loadingIcon | 加载中的图标，或者小图片 | String | photo | - |
| errorIcon | 加载失败的图标，或者小图片 | String | error-circle | - |
| showLoading | 是否显示加载中的图标或者自定义的slot | Boolean | true | false |
| showError | 是否显示加载错误的图标或者自定义的slot | Boolean | true | false |
| fade | 是否需要淡入效果 | Boolean | true | false |
| webp | 只支持网络资源，只对微信小程序有效 | Boolean | false | true |
| duration | 搭配fade参数的过渡时间，单位ms |
String | Number | 500 | - |
| bgColor | 背景颜色，用于深色页面加载图片时，为了和背景色融合 | String | #f3f4f6 | - |
#Slot
| 名称 | 说明 |
| loading | 自定义加载中的提示内容 |
| error | 自定义失败的提示内容 |
#CellItem Events
| 事件名 | 说明 | 回调参数 |
| click | 点击图片时触发 | - |
| error | 图片加载失败时触发 | err: 错误信息 |
| load | 图片加载成功时触发 | - |
