Image 图片

文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/image

基本语法:

<vant-image width="100" height="100" src="..."></vant-image>

常用属性:

• width 和 height 设置宽高. 默认为 inline-block 元素.
• src 用来设置图片地址.
• 填充模式: fit, 常用取值: cover, 其他值特定时候才会使用.
• 圆形图片. 使用 round 属性即可. 在设置图标或头像的时候会使用到.

懒加载的用法:

1. 引入 Lazyload 组件, 该组件是指令的形式. 因此建议使用全局加载.
2. 在需要加载图片的组件中, 使用 v-lazy 来代替 src
3. 需要作为背景样式加载图片的时候使用 v-lazy:background-image, 属性值为图片地址.
4. 如果要懒加载组件. 全局注册时使用 lazyComponent: true 的选项. 使用 lazy-component 组件作为组件容器.

注意文档中使用的属性不同:

• img 使用 v-lazy 指定图片. 经过演示, img 标签不支持使用 lazy-load 实现懒加载, 只适用于 v-lazy 方法.
• image 使用 src 指定图片, 带上 lazy-load 属性. 直接使用 v-lazy 无法加载图片.

演示后发现不起作用.