图片 Image

图片组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 src 属性设置图片路径。

<template>
    <pure-image src="/static/logo.png"></pure-image>
</template>

图片大小

• 通过 width 和 height 属性设置图片大小。
• 默认宽度为 160px，高度为 120px。

<template>
    <pure-image src="/static/logo.png" width="120px" height="120px"></pure-image>
</template>

圆形图片

• 通过 circle 属性设置为圆形，此时高度会自动等于宽度。

<template>
    <pure-image src="/static/logo.png" width="120px" circle></pure-image>
</template>

加载中

• 通过 loadingIcon 属性设置图标。
• 通过 loadingText 属性设置文本。
• 通过 loadingMode 属性设置裁剪模式。
• 通过 loadingSpin 属性设置是否转圈。

提示

• 如果设置了占位图：则图片为 loading 且占位图为 loading 状态时才会显示加载中状态。
• 如果未设置占位图：则图片为 loading 状态时显示加载中状态。

<template>
    <pure-image src="/static/logo.png" loadIcon="__loading" loadSpin loadText="正在加载..."></pure-image>
</template>

加载失败

• 通过 failIcon 属性设置图标。
• 通过 failText 属性设置文本。
• 通过 failMode 属性设置裁剪模式。

提示

• 如果设置了占位图：则图片为 fail 且占位图为 fail 状态时才会显示失败状态。
• 如果未设置占位图：则图片为 fail 状态时显示失败状态。

<template>
    <pure-image src="xxx" failText="图片加载失败"></pure-image>
</template>

占位图

• 通过 placeholder 属性设置占位图。

提示

• 适用于图片较大，加载时间较长，在图片加载成功之前显示一个相对模糊、体积较小的图片，以提高用户体验。
• 显示规则为：图片为非 loading 且占位图为 success 状态时才会显示。

<template>
    <pure-image src="xxx" placeholder="/static/logo_placeholder.png"></pure-image>
</template>

点击预览

• 通过 preview 属性设置是否开启预览功能，只能预览当前图片。

<template>
    <pure-image src="/static/logo.png" preview></pure-image>
</template>

裁剪模式

• 通过 mode 属性设置裁剪模式，同 uni-app 的 image 组件的 mode 属性一致。参考

<template>
    <pure-image src="/static/logo.png" mode="widthFix"></pure-image>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
src	图片路径	String	-	-	+1.0.0
mode	图片裁剪模式，同 uni-app 的 image 组件的 mode 属性一致。参考	String	scaleToFill	-	+1.0.0
width	图片宽度	String	-	-	+1.0.0
height	图片高度	String	-	-	+1.0.0
loadingIcon	加载中状态的图标名称，同图标组件（Icon）的 name 属性，参考	String	__tupian	-	+1.0.0
loadingMode	加载中状态的图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	undefined	-	+1.0.0
loadingText	加载中状态的提示文本	String	-	-	+1.0.0
loadingSpin	加载中状态的图片是否旋转	Boolean	false	true	+1.0.0
failIcon	加载失败状态的图标名称，同图标组件（Icon）的 name 属性，参考	String	__tishi	-	+1.0.0
failMode	加载失败状态的图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	undefined	-	+1.0.0
failText	加载失败状态的提示文本	String	-	-	+1.0.0
placeholder	占位图地址	String	-	-	+1.0.0
circle	是否圆形图片	Boolean	false	true	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	pure-disabled	-	+1.0.0
preview	是否开启点击预览	Boolean	false	true	+1.0.0
lazyLoad	是否开启懒加载	Boolean	false	true	+1.0.0
fadeShow	是否开启图片渐显效果	Boolean	true	false	+1.0.0
webp	在系统不支持 webp 的情况下是否单独启用 webp。默认false，只支持网络资源	Boolean	false	true	+1.0.0
showMenuByLongpress	开启长按图片显示识别小程序码菜单	Boolean	false	true	+1.0.0
draggable	是否能拖动图片	Boolean	true	false	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	-	+1.0.0
load	图片加载完成事件	event: event.detail = {height:'图片高度px', width:'图片宽度px'}	+1.0.0
error	图片加载失败事件	event: event.detail = {errMsg: 'something wrong'}	+1.0.0

Slots

名称	说明	参数	版本
loading	加载中状态内容	-	+1.0.0
fal	加载失败状态内容	-	+1.0.0