【vue3】如何将一组图片快速导入页面，形成一个网页

【vue3】如何将一组图片快速导入页面，形成一个网页

<img v-for="(img, index) in imgList" :key="index"
     :src="img.default" alt="image">

const images = ref({})
const imgList = ref([])
 
function test() {
    // 我的图片命名为 pig1.jpg、pig2.jpg...
    images.value = import.meta.glob('@/assets/apply/pig*.jpg', { eager: true });
 
    // 方法一（10 张图片内适用，超过10张顺序会变成：1、10、2、3、4...）
    // 提取路径
    imgList.value = Object.values(images.value);
 
    // 方法二（超过 10 张图片适用）
    imgList.value = Array.from({ length: 20 }, (_, i) =>
        images.value[`/src/assets/apply/sprout${i + 1}.jpg`]
    );
}
 
// 导入的 images.value 结构大致如下：default 是 Vite 解析后的图片路径
// images.value = {
//   './pig1.jpg': { default: '/assets/apply/pig1.jpg' },
//   './pig2.jpg': { default: '/assets/apply/pig2.jpg' },
//   './pig3.jpg': { default: '/assets/apply/pig3.jpg' }
// };
 
// imgList.value = [
//   { default: '/assets/apply/pig1.jpg' },
//   { default: '/assets/apply/pig2.jpg' },
//   { default: '/assets/apply/pig3.jpg' }
// ];

import.meta.glob() 是 Vite 提供的 api，用于批量导入符合 pig*.jpg 命名规则的所有图片

import.meta.glob返回的对象是无序的（基于文件系统的读取顺序，可能受操作系统或构建工具影响）

{ eager: true } 立即加载这些图片（不使用懒加载）