vite+vue3 v-for 图片

以下是使用vite和Vue 3进行v-for循环显示图片的示例：

1. 首先，确保你已经安装了vite和Vue 3。如果没有安装，可以使用以下命令进行安装：

npm install -g create-vite
create-vite my-vue-app --template vue-ts
cd my-vue-app
npm install

2. 在你的Vue组件中，首先导入需要使用的图片：

import image1 from '@/assets/image1.jpg';
import image2 from '@/assets/image2.jpg';
import image3 from '@/assets/image3.jpg';

3. 在模板中使用v-for循环来显示图片：

<template>
  <div>
    <div v-for="image in images" :key="image.id">
      <img :src="image.src" alt="Image">
    </div>
  </div>
</template>

4. 在组件的data选项中定义一个包含图片信息的数组：

data() {
  return {
    images: [
      { id: 1, src: image1 },
      { id: 2, src: image2 },
      { id: 3, src: image3 }
    ]
  };
}

5. 运行你的应用并查看结果：

npm run dev

这样就可以使用v-for循环在Vue 3中显示多张图片了。