[Doc] Image: update document (#3518)

This commit is contained in:
neverland 2019-06-14 20:46:27 +08:00 committed by GitHub
parent da514e100d
commit 13ed8b2c7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>
```