Vant4 中的 Image 图片组件用于显示图片，提供了一些实用的功能，如懒加载、加载失败时的占位图等。以下是 Vant4 中 Image 图片组件的基本用法和一些常见的配置选项：

基本用法

1. 安装 Vant4 和 Image 组件：

   确保你已经安装了 Vant4 和相关的样式：
   npm install vant@next

2. 引入 Image 组件：

   在需要使用 Image 的组件中，引入 Image 组件：
   <template>
     <van-image src="https://example.com/image.jpg" />
   </template>

常见配置选项

以下是一些常见的 Image 配置选项：

  •  src： 图片链接，可以是网络图片地址或本地图片路径。

<template>
  <van-image src="https://example.com/image.jpg" />
</template>

  •  fit： 图片填充模式，可选值为 'contain'、'cover'、'fill' 等，默认为 'cover'。

<template>
  <van-image src="https://example.com/image.jpg" fit="contain" />
</template>

  •  lazy-load： 是否开启图片懒加载，默认为 false。

<template>
  <van-image src="https://example.com/image.jpg" lazy-load />
</template>

  •  show-error： 是否展示加载失败提示，默认为 true。

<template>
  <van-image src="https://example.com/image.jpg" :show-error="false" />
</template>

  •  error-icon： 加载失败提示的图标名称，对应 Vant4 图标库中的图标。

<template>
  <van-image src="https://example.com/image.jpg" error-icon="error" />
</template>

  •  loading-icon： 加载时的图标名称，对应 Vant4 图标库中的图标。

<template>
  <van-image src="https://example.com/image.jpg" loading-icon="loading" />
</template>

这只是 Vant4 中 Image 图片组件的一些基本用法和配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。


转载请注明出处：http://www.zyzy.cn/article/detail/5793/Vant