如何使用React/Electron/Node从一堆子目录中获取所有图像

Question

我正在用电子锻造做一个应用。我目前正在构建的一件事需要我在一个具有以下结构的目录中包含大约140张图像：

- assets
  - cards
    - ai
      - ai.jpg
      - ai.mp3
    - ar
      - ar.jpg
      - ar.mp3

..。诸若此类

我希望能够构建一个看起来像这样的对象：

{
  ai: {
   path/to/ai.jpg,
   path/to/ai.mp3,
  },
  ar: {
   path/to/ar.jpg,
   path/to/ar.mp3,
  }
}

我尝试使用require directory，但没有用-它似乎只返回我的.js文件：

cards/index.js：

var requireDirectory = require('require-directory');
module.exports = requireDirectory(module);

Cards.js：

import allCards from '../assets/cards';
console.log("::::::", allCards);

(我知道，使用require和import - bad只是在测试这一点)

我不确定这是如何实现的，甚至不确定是否可以实现。提前感谢！

Answer 1

我不知道这是否会对你有帮助，但这是我从各种SO答案中拼凑而成的一个例程。给定一个目录，如果递归地(同步地)遍历所有子文件夹，并将图像文件的路径推入一个数组并返回该数组。

我不是Javascript英雄，所以可能有比使用fs-jetpack或walkSync更好的- such方式

它使用fs和upath

var flattened = [];
flattened = walkSync(dir, flattened)

var walkSync = function (dir, filelist) {

    var files = fs.readdirSync(dir);
    filelist = filelist || [];
    files.forEach(function (file) {
        if (fs.statSync(upath.toUnix(upath.join(dir, file))).isDirectory()) {
            filelist = walkSync(upath.toUnix(upath.join(dir, file)), filelist);
        }
        else {
            var ext = upath.extname(file).toLowerCase();
            if (ext == '.jpg' || ext == '.jpeg' || ext == '.png') {
                filelist.push(upath.toUnix(upath.join(dir, file)));
            }
        }
    });
    return filelist;
};