今担当しているサービスが画像を追加するたびにソースにも画像ファイル名を記述しないといけない記述になっていて、それは面倒なので特定のディレクトリ下にファイルを追加したらコード自体には一切手を加えずにできるようにしたい。
結論から言うと下記の通り(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の型定義~
- 作者:吉井 健文
- 発売日: 2019/06/26
- メディア: 単行本(ソフトカバー)