vue3 import批量引入图片

vue yekong

当然,如果你需要批量引入大量图片并将它们放入数组中,可以使用以下代码:

const images = [];
for (let i = 0; i <= 74; i++) {
  images.push(require(`./topbg/topbg_${i}.png`).default);
}

这里,我使用了require函数和模板字符串来动态构造每个图片的路径,并将它们推入images数组中。这样,你就可以通过images[0]images[1]等访问这些图片。

请注意,这种方法的可行性取决于你的构建系统和模块加载器。上述代码在使用如Webpack之类的模块打包器时应该可以正常工作。

如果你确实需要使用import语句,并且你的构建系统支持动态import()语法,你也可以考虑使用异步方法来加载这些图片:

const images = [];

async function loadImages() {
  for (let i = 0; i <= 74; i++) {
    const image = await import(`./topbg/topbg_${i}.png`);
    images.push(image.default);
  }
}

loadImages();

这个版本使用了async/await语法和动态import()函数,可以实现与上述require版本相同的效果。

其他实例

async loadImages() {
  const imageNames = [
    'apm',
    'line1',
    'line2',
    'line3',
    'line4',
    'line5',
    'line6',
    'line7',
    'line8',
    'line9',
    'line13',
    'line14',
    'lineg'
  ];

  // 使用Promise.all和map来并行加载所有图片
  const images = await Promise.all(
      imageNames.map(async name => {
        const image = await import(`./assets/${name}.png`);
        return {name, image};
      })
  );

  // 将加载的图片转换为一个对象
  this.imageList = images.reduce((acc, {name, image}) => {
    acc[name] = image.default; // 或者根据实际情况调整属性
    return acc;
  }, {});
},
喜欢