在 React.js 中动态获取资产图像

Question

我的资产

/public
  /flags
    flags_a.png
    flags_ramdom_name.png
    flags_ramdon_name2.png
    ...

我想动态导入所有这些。 像这样……

const allFlags = getImages('/public/flags'); // ['flags_a.png', 'flag_random_name.png', ...]

return (
  <div>
    {allFlags.map((src)=> <img src={src} />);
  </div>
);

如何在 React.js 中实现它

Answer 1

我认为 glob 模块可以帮助您，这将递归地为您获取所有带有 .png 的文件名

var glob = require("glob")

glob("/public/flags/*.png", options, function (er, files) {
console.log(files)
// files is an array of filenames.

})

使用 npm link 安装 glob