图片 Image

基础 · 展示组件

图片加载与失败占位

按需导入wbbb-ui/components/image

基础用法

<script setup lang="ts">
import { WbbbImage } from 'wbbb-ui/components/image'
import 'wbbb-ui/styles/image'
</script>

<template>
  <WbbbImage />
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

成功加载中加载失败空资源

API 参考

属性（Props）

属性	说明	类型	默认值	必填
`errorText`	设置加载失败时显示的默认提示文案。	`string`	`'图片加载失败'`	否
`height`	设置组件高度。	`WbbbNumeric`	`''`	否
`lazyLoad`	是否延迟加载图片资源。	`boolean`	`true`	否
`mode`	设置展示方式或图片适配模式。	`string`	`'aspectFill'`	否
`radius`	设置组件的圆角半径。	`WbbbNumeric`	`0`	否
`showError`	控制是否显示内置错误占位。	`boolean`	`true`	否
`showLoading`	控制是否显示内置加载占位。	`boolean`	`true`	否
`src`	设置资源的 URL 或本地路径。	`string`	`''`	否
`loading`	是否显示加载状态，并在适用时阻止重复交互。	`boolean`	`false`	否
`loadingText`	设置加载过程显示的文案。	`string`	`'加载中'`	否
`width`	设置组件宽度。	`WbbbNumeric`	`'100%'`	否

事件（Events）

error
load

插槽（Slots）

error

双向绑定

不支持 v-model。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：更多状态组合和跨端表现请在 Playground 中验证。

图片 Image ​

基础用法 ​

状态与交互 ​

API 参考 ​