☰

webpackを使用してディレクトリから画像を動的にインポートする 質問する

tag-icon • tag-icon reactjs webpack ecmascript-6
webpackを使用してディレクトリから画像を動的にインポートする 質問する

ES6 経由で webpack に画像とアイコンをインポートするための現在のワークフローは次のとおりです。

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

すぐに面倒になります。私が欲しいのは次のようなものです。

import * from './images'

<img src={doggy} />
<img src={turtle} />

特定のディレクトリからすべてのファイルを拡張子なしの名前で動的にインポートし、必要に応じてそれらのファイルを使用する方法があるはずだと私は思います。

これを見たことがある人、またはこれを実行する最善の方法について何か考えを持っている人はいますか?

アップデート：

選択した回答を使用して、次の操作を実行できました。

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

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

<img src={images['doggy.png']} />

ベストアンサー1

特定のディレクトリからすべてのファイルを拡張子なしの名前で動的にインポートし、必要に応じてそれらのファイルを使用する方法があるはずだと私は思います。

importES6ではそうではありません。との重要な点exportは、依存関係を決定できることです。静的につまり、コードを実行せずに。

しかし、webpackを使用しているので、require.context次のことができるようになります。

function importAll(r) {
  return r.keys().map(r);
}

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

おすすめ記事