当然,如果你需要批量引入大量图片并将它们放入数组中,可以使用以下代码:
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;
}, {});
},