Image 图片
Basic · Display component
Image loading and error placeholders.
On-demand import
wbbb-ui/components/imageBasic Usage
<script setup lang="ts">
import { WbbbImage } from 'wbbb-ui/components/image'
import 'wbbb-ui/styles/image'
</script>
<template>
<WbbbImage />
</template>States and Interaction
All listed states can be operated and verified in the live Playground preview.
SuccessLoadingLoad failedEmpty source
API Reference
Props
| Property | Description | Type | Default | Required |
|---|---|---|---|---|
errorText | Sets the default message shown after a loading failure. | string | '图片加载失败' | No |
height | Sets the component height. | WbbbNumeric | '' | No |
lazyLoad | Defers image loading until it is needed. | boolean | true | No |
mode | Sets the display or image fitting mode. | string | 'aspectFill' | No |
radius | Sets the corner radius of the component. | WbbbNumeric | 0 | No |
showError | Controls whether the built-in error placeholder is shown. | boolean | true | No |
showLoading | Controls whether the built-in loading placeholder is shown. | boolean | true | No |
src | Sets the source URL or local path of the resource. | string | '' | No |
loading | Shows a loading state and blocks repeated interaction when applicable. | boolean | false | No |
loadingText | Sets the text displayed while loading. | string | '加载中' | No |
width | Sets the component width. | WbbbNumeric | '100%' | No |
Events
errorload
Slots
error
Two-way binding
Does not support v-model.
Platform Notes
Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.
Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.
Usage note: Use Playground to verify further state combinations and cross-platform behavior.