抱歉,如果它看起来有点混乱,我会尽量简单,并尽可能多地演示。
问题
我有一个文件,需要导入一组图像(现在有65个图像)。为了避免手动操作,即使在文件夹中添加新图像并已被“自动检测”时,我也创建了一个函数来导入所有内容。但是,我需要将此函数“导出”到如下对象中:
const brandsAdds = [
{
label: "brand1",
value: "brand1",
logo: Object,
},
{
label: "brand2",
value: "brand2",
logo: Object,
},
...
];
如何导入所有图像:
// Import all images in folder
function importAll(r) {
let images = {};
r.keys().map((item, index) => {
images[item.replace("./", "").slice(0, -4)] = r(item).default;
});
return images;
}
// Variable for easy access to data
const image = importAll(
require.context("../", false, /\.(png|jpe?g|svg|gif)$/)
);
演示
自动化流程:https://codesandbox.io/s/frosty-sun-n75j5?file=/pages/index.js
结果:打印结果:必须转换什么以及如何转换
手动过程:https://codesandbox.io/s/frosty-sun-n75j5?file=/pages/index_manual.js
结果:打印结果手动处理
我正在使用next.js,这个导出数组对象的文件将在另一个组件中使用。这个文件目前有300多行,我一个图像一个图像地调用它。
是否有任何方法可以导入所有图像,将它们添加到带有“label:”和“value:”以及文件名和“logo:”以及图像路径(next.js)的数组中?
暂无答案!
目前还没有任何答案,快来回答吧!