mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] Image: update document (#3518)
This commit is contained in:
parent
da514e100d
commit
13ed8b2c7c
@ -1,5 +1,9 @@
|
||||
# Image 图片
|
||||
|
||||
### 介绍
|
||||
|
||||
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
@ -12,6 +16,8 @@ Vue.use(Image);
|
||||
|
||||
### 基础用法
|
||||
|
||||
基础用法与原生`img`标签一致,可以设置`src`、`width`、`height`、`alt`等原生属性
|
||||
|
||||
```html
|
||||
<van-image
|
||||
width="100"
|
||||
@ -22,6 +28,8 @@ Vue.use(Image);
|
||||
|
||||
### 填充模式
|
||||
|
||||
通过`fit`属性可以设置图片填充模式,可选值见下方表格
|
||||
|
||||
```html
|
||||
<van-image
|
||||
width="10rem"
|
||||
@ -33,6 +41,8 @@ Vue.use(Image);
|
||||
|
||||
### 图片懒加载
|
||||
|
||||
设置`lazy-load`属性来开启图片懒加载,需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用
|
||||
|
||||
```html
|
||||
<van-image
|
||||
width="100"
|
||||
@ -42,15 +52,9 @@ Vue.use(Image);
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Lazyload } from 'vant';
|
||||
|
||||
Vue.use(Lazyload);
|
||||
```
|
||||
|
||||
### 加载中提示
|
||||
|
||||
`Image`组件提供了默认的加载中提示,可以通过`loading`插槽自定义加载中提示
|
||||
`Image`组件提供了默认的加载中提示,支持通过`loading`插槽自定义内容
|
||||
|
||||
```html
|
||||
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
|
||||
@ -62,13 +66,11 @@ Vue.use(Lazyload);
|
||||
|
||||
### 加载失败提示
|
||||
|
||||
`Image`组件提供了默认的加载失败提示,可以通过`error`插槽自定义加载失败提示
|
||||
`Image`组件提供了默认的加载失败提示,支持通过`error`插槽自定义内容
|
||||
|
||||
```html
|
||||
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
|
||||
<template v-slot:error>
|
||||
<van-icon name="close" size="20" />
|
||||
</template>
|
||||
<template v-slot:error>加载失败</template>
|
||||
</van-image>
|
||||
```
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user