在 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 模塊可以幫助您，這將遞歸地為您提供所有文件名 with.png

var glob = require("glob")

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

})

使用 npm鏈接安裝 glob