图片 Image
- 支持加载状态
- 支持加载失败状态
- 支持占位图
- 支持预览
插件市场地址
https://ext.dcloud.net.cn/plugin?name=pure-image
基础使用
通过 src 属性设置图片路径即可使用。
vue
<pure-image src="/static/logo.png"></pure-image>图片大小
- 通过
width和height属性设置图片大小 - 默认宽度为
160px，高度为120px
vue
<pure-image src="/static/logo.png" width="120px" height="120px"></pure-image>圆形图片
通过 circle 属性设置是否显示为圆形。
vue
<pure-image src="/static/logo.png" width="120px" height="120px" circle></pure-image>加载中状态
- 通过
loadIcon属性设置加载中状态图标 - 通过
loadText属性设置加载中状态文本 - 通过
loadMode属性设置加载中状态图标的裁剪模式 - 通过
loadSpin属性设置加载中状态图标是否旋转
提示
如果设置了占位图，则图片为 loading 且占位图为 loading 状态时显示。 如果未设置占位图，则图片为 loading 状态时显示。
vue
<pure-image src="/static/logo.png" loadIcon="__loading" loadSpin loadText="正在加载..."></pure-image>加载失败状态
- 通过
failIcon属性设置加载失败状态图标 - 通过
failText属性设置加载失败状态文本 - 通过
failMode属性设置加载失败状态图标的裁剪模式
提示
如果设置了占位图，则图片为 fail 且占位图为 fail 状态时显示。 如果未设置占位图，则图片为 fail 状态时显示。
vue
<pure-image src="/static/loogoo.png" failText="图片加载失败"></pure-image>占位图
- 通过
placeholder属性设置占位图
提示
适用于图片较大，加载时间较长，在图片加载成功之前显示一个相对模糊的图片，以提高用户体验。 显示规则为：图片为非 loading 且占位图为 success 状态时显示。
vue
<pure-image src="/static/logo.png" placeholder="/static/logo_placeholder.png"></pure-image>点击预览
通过 preview 属性设置是否开启预览功能。
vue
<pure-image src="/static/logo.png" preview></pure-image>裁剪模式
通过 mode 属性设置图片裁剪模式，同 uni-app 的 image 组件的 mode 属性一致。参考
vue
<pure-image src="/static/logo.png" mode="widthFix"></pure-image>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 |
loadIcon | 加载中状态的图标名称，同图标组件（Icon）的 name 属性，参考 | String | __tupian | - | +1.0.0 |
loadMode | 加载中状态的图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考 | String | undefined | - | +1.0.0 |
loadText | 加载中状态的提示文本 | String | - | - | +1.0.0 |
loadSpin | 加载中状态的图片是否旋转 | 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 |
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
提示
京东小程序不支持 slot。
| 名称 | 说明 | 参数 | 版本 |
|---|---|---|---|
loading | 加载中状态内容 | - | +1.0.0 |
fal | 加载失败状态内容 | - | +1.0.0 |
样式变量
| 变量名 | 默认值 | 版本 |
|---|---|---|
--pure-image-display | inline-flex | +1.0.0 |
--pure-image-flex-direction | column | +1.0.0 |
--pure-image-align-items | center | +1.0.0 |
--pure-image-justify-content | center | +1.0.0 |
--pure-image-background | var(--pure-background-element) | +1.0.0 |
--pure-image-width | 160px | +1.0.0 |
--pure-image-height | 120px | +1.0.0 |
--pure-image-border-width | - | +1.0.0 |
--pure-image-border-style | - | +1.0.0 |
--pure-image-border-color | - | +1.0.0 |
--pure-image-overflow | hidden | +1.0.0 |
--pure-image-line-height | 1 | +1.0.0 |
--pure-image-text-align | center | +1.0.0 |
--pure-image-border-radius | - 或 50% | +1.0.0 |
--pure-image-status-gap | 8px | +1.0.0 |
--pure-image-status-font-size | - | +1.0.0 |
--pure-image-status-color | - | +1.0.0 |
--pure-image-status-opacity | var(--pure-opacity-lighter-text) | +1.0.0 |
--pure-image-status-padding | 10px | +1.0.0 |
--pure-image-status-icon-font-size | 26px | +1.0.0 |
--pure-image-status-icon-color | - | +1.0.0 |
--pure-image-status-icon-image-width | - | +1.0.0 |
--pure-image-status-icon-image-height | - | +1.0.0 |
--pure-image-status-text-font-size | var(--pure-font-size-smaller) | +1.0.0 |
--pure-image-status-text-color | - | +1.0.0 |
--pure-image-loading-font-size | - | +1.0.0 |
--pure-image-loading-color | - | +1.0.0 |
--pure-image-loading-gap | - | +1.0.0 |
--pure-image-loading-opacity | - | +1.0.0 |
--pure-image-loading-icon-font-size | - | +1.0.0 |
--pure-image-loading-icon-color | - | +1.0.0 |
--pure-image-loading-icon-image-width | - | +1.0.0 |
--pure-image-loading-icon-image-height | - | +1.0.0 |
--pure-image-loading-animation-duration | 1.2s | +1.0.0 |
--pure-image-loading-animation-timing-function | linear | +1.0.0 |
--pure-image-loading-animation-iteration-count | infinite | +1.0.0 |
--pure-image-loading-text-font-size | - | +1.0.0 |
--pure-image-loading-text-color | - | +1.0.0 |
--pure-image-fail-font-size | - | +1.0.0 |
--pure-image-fail-color | - | +1.0.0 |
--pure-image-fail-gap | - | +1.0.0 |
--pure-image-fail-opacity | - | +1.0.0 |
--pure-image-fail-icon-font-size | - | +1.0.0 |
--pure-image-fail-icon-color | - | +1.0.0 |
--pure-image-fail-icon-image-width | - | +1.0.0 |
--pure-image-fail-icon-image-height | - | +1.0.0 |
--pure-image-fail-text-font-size | - | +1.0.0 |
--pure-image-fail-text-color | - | +1.0.0 |