导入多个图像并导出数组

oiopk7p5  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(336)

抱歉,如果它看起来有点混乱,我会尽量简单,并尽可能多地演示。
问题
我有一个文件,需要导入一组图像(现在有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)的数组中?

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题