Skip to content

Img 图片

增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载完成、加载失败

基本用法

基础用法与原生 image 标签一致,可以设置 srcwidthheight 等原生属性。

原生属性,参考uni-app image 官方文档

此处需要注意的是 src 属性:

使用 相对路径,需要注意 src 需要以组件存放位置相对图片位置为相对路径。

使用 文件导入 ,需要注意的是微信小程序 image 标签路径接受二进制数据以及 base64 编码。单独使用 import 图片路径无法访问。

html
<wd-img :width="100" :height="100" :src="joy" />
typescript
// import { joy } from '../images/joy'
const joy = 'data:image/jpeg;base64,...' // 图片文件base64

插槽

使用loading error插槽设置在图片加载时、加载失败后的展示内容

vue
<template>
  <wd-img :width="100" :height="100" src="https://www.123.com/a.jpg">
    <template #error>
      <view class="error-wrap">加载失败</view>
    </template>
    <template #loading>
      <view class="loading-wrap">
        <wd-loading />
      </view>
    </template>
  </wd-img>
</template>

<style>
.error-wrap {
  width: 100%;
  height: 100%;
  background-color: red;
  color: white;
  line-height: 100px;
  text-align: center;
}

.loading-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

填充模式

通过 mode 属性可以设置图片填充模式,可选值见下方表格。

mode 为小程序原生属性,参考微信小程序 image 官方文档

html
<wd-img :width="100" :height="100" mode="center" :src="joy" />

圆形设置

通过 round 属性可以设置以圆形展示。

html
<wd-img :width="100" :height="100" round :src="joy" />

可预览

通过设置enable-preview属性可以支持点击预览,底层调用 uni.previewImage 来实现预览效果

html
<wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />

Attributes

参数说明类型可选值默认值最低版本
src图片链接string---
width宽度,默认单位为 pxnumber / string---
height高度,默认单位为 pxnumber / string---
mode填充模式ImageMode'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill''scaleToFill'-
round是否显示为圆形boolean-false-
radius圆角大小,默认单位为 pxnumber / string---
enable-preview是否支持点击预览boolean-false1.2.11
show-menu-by-longpress开启长按图片显示识别小程序码菜单,仅微信小程序支持boolean-false1.3.11

Events

事件名称说明参数最低版本
click点击事件(event: MouseEvent) => void-
load当图片载入完毕时触发{height, width}-
error当错误发生时触发{errMsg}-

Slots

名称说明最低版本
loading图片加载时展示1.2.21
error图片加载失败后展示1.2.21

外部样式类

类名说明最低版本
custom-class根节点样式-
custom-imageimage 外部自定义样式-

Released under the MIT License.

Released under the MIT License.