注册 X
提交 注:点击提交后系统会发送邮件到邮箱验证!(仅支持中国大陆邮箱)
我已阅读并同意 服务条款
首页 > IT技术笔记 > 查看笔记

vant-Image图片

Image 图片

介绍

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

引入

        
        
      

代码演示

基础用法

基础用法与原生 `img` 标签一致,可以设置 `src`、`width`、`height`、`alt` 等原生属性。

        
        
      

填充模式

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

        
        
      

圆形图片

通过 `round` 属性可以设置图片变圆,注意当图片宽高不相等且 `fit` 为 `contain` 或 `scale-down` 时,将无法填充一个完整的圆形。

        
        
      

图片懒加载

设置 `lazy-load` 属性来开启图片懒加载,需要搭配

Lazyload

组件使用。

        
        
      

        
        
      

加载中提示

`Image` 组件提供了默认的加载中提示,支持通过 `loading` 插槽自定义内容。

        
        
      

加载失败提示

`Image` 组件提供了默认的加载失败提示,支持通过 `error` 插槽自定义内容。

        
        
      

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度,默认单位为pxnumber、string-
height高度,默认单位为pxnumber、string-
radius圆角大小,默认单位为pxnumber、string0
round是否显示为圆形booleanfalse
lazy-load是否开启图片懒加载,须配合 [Lazyload](https://youzan.github.io/vant/v2/#/zh-CN/lazyload) 组件使用booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
error-icon失败时提示的[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接stringphoto-fail
loading-icon加载时提示的[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接stringphoto
icon-prefix v2.10.12图标类名前缀,同 Icon 组件的 [class-prefix 属性](https://youzan.github.io/vant/v2/#/zh-CN/icon#props)stringvan-icon

图片填充模式

名称含义
contain保持宽高缩放图片,使图片的长边能完全显示出来
cover保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边
fill拉伸图片,使图片填满元素
none保持图片原有尺寸
scale-downnonecontain中较小的一个

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发-
error图片加载失败时触发-

Slots

名称说明
default v2.9.0自定义图片下方的内容
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考

主题定制

名称默认值描述
@image-placeholder-text-color@gray-6-
@image-placeholder-font-size@font-size-md-
@image-placeholder-background-color@background-color-
@image-loading-icon-size32px-
@image-loading-icon-color@gray-4-
@image-error-icon-size32px-
@image-error-icon-color@gray-4-

常见问题

如何引用本地图片?

在 .vue 文件中通过相对路径引用本地图片时,需要在图片的链接外包上一层 `require()`,将图片 URL 转换为 webpack 模块请求,并结合

file-loader

或者

url-loader

进行处理。

        
        
      

> 对此更详细的解释可以参考 vue-loader 的

处理资源路径

章节。

使用 image 标签无法渲染?

        
        
      

        
        
      

        
        
      

效果图:


 打赏        分享



评论

邮箱: 昵称: