いてづきブログ

情シスでやってみたことの備忘録

Webpackでディレクトリ下の画像ファイルを動的に読み込む

今担当しているサービスが画像を追加するたびにソースにも画像ファイル名を記述しないといけない記述になっていて、それは面倒なので特定のディレクトリ下にファイルを追加したらコード自体には一切手を加えずにできるようにしたい。

 

結論から言うと下記の通り(TypeScript)

function App() {
  const importAll = (r: __WebpackModuleApi.RequireContext) => {
    return r.keys().map(r).map(image => { return image as string });
  }

  const images = importAll(require.context('./assets/images', false, /\.(png|jpe?g|svg)$/));

  return (
    <>
      {images.map(image => <img src={image} key={image} alt={image} />)}
    </>
  );
}

webpack.js.org require.context()で読み込むファイルを探すディレクトリと正規表現を指定して対象ファイルのパスを取得できる。


RequireContextの戻り値がanyなので、return r.keys().map(r) の部分だけで見ると unknown[] となっている。
今回は画像を読み込んでいるためsrcに突っ込むために更にmapしてstringにしている。

参考記事

https://qiita.com/proudust/items/d716957e243f9e019fda

https://qiita.com/jkr_2255/items/d23e66323857d3189a00

実践TypeScript ~	BFFとNext.js&Nuxt.jsの型定義~

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~

  • 作者:吉井 健文
  • 発売日: 2019/06/26
  • メディア: 単行本(ソフトカバー)