# Img 图片

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

设置图片的 width 宽和 height 高和 src 路径便可正常显示。

加载失败则显示占位内容。

<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  src="http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg"
/>
<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  src="http://img.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg"
/>
<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc + 1"
>
  <view slot="error">
    自定义占位内容
  </view>
</pi-img>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 懒加载

lazyLoad 属性可开启图片懒加载，需要注意的是，要配合 width 宽和 height 高使用。

<pi-img
  width="220"
  height="200"
  mode="widthFix"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
 />
<pi-img
  width="220"
  height="200"
  mode="widthFix"
  loading-type="round"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

提示

可以使用slot对该组件进行二次封装，自定义loading图标和error内容。

# 裁剪/缩放

<pi-img
  width="220"
  mode="widthFix"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="320"
  mode="scaleToFill"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="220"
  mode="aspectFit"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/
<pi-img
  width="220"
  height="220"
  mode="aspectFill"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

更多的缩放/裁剪模式详情请见uni-app的 Image (opens new window) 组件。

# 图片形状

通过shape 设置图片的形状，使其使用于更多场景。

<pi-img
  width="220"
  height="220"
  mode="widthFix"
  shape="square"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="220"
  mode="scaleToFill"
  loading-type="round"
  shape="round"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# API

# Image Props

名称	描述	类型	必选	默认值
customStyle	自定义样式	`Object`	`false`	-
customClass	自定义样式类	`String`	`false`	-
src	图片地址	`String`	`false`	''
mode	裁剪模式	`String`	`false`	'widthFix'
width	宽度	`String \| Number`	`false`	'100%'
height	高度	`String \| Number`	`false`	'auto'
dot	是否显示图标右上角小红点	`Boolean`	`false`	false
dotRadius	小红点的半径	`String \| Number`	`false`	16
badge	图标右上角徽标的内容	`String \| Number`	`false`	''
shape	图片形状	`'round'-圆形` `'square'-方形`	`false`	'square'
borderRadius	shape为square的时候设置	`String \| Number`	`false`	0
lazyLoad	是否懒加载	`Boolean`	`false`	true
showMenuByLongpress	开启长按图片显示识别微信小程序码菜单	`Boolean`	`false`	true
showLoading	是否显示加载中的图标或者自定义的slot	`Boolean`	`false`	true
loadingColor	加载中颜色	`String`	`false`	'#c1c1c1'
loadingType	loading类型	`'spinner'-菊花` `'round'-圆环`	`false`	'spinner'
loadingSize	尺寸	`String \| Number`	`false`	32
showError	是否显示加载中的图标或者自定义的slot	`Boolean`	`false`	true
webp	默认不解析 webP 格式，只支持网络资源	`Boolean`	`false`	false

# Image Events

事件名	描述	参数
click	-	-
load	图片加载完成	-

# Image Slots

名称	描述	插槽内容
loading	加载中样式	-
error	加载失败样式	-

← Badge 徽标 Loading 加载中 →