Итак, вот мой текущий рабочий процесс для импорта изображений и значков в webpack через ES6:
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} />
Я чувствую, что должен быть какой-то способ динамически импортировать все файлы из определенного каталога в качестве имени без расширения, а затем использовать эти файлы по мере необходимости.
Кто-нибудь видел это, или есть какие-то мысли о том, как лучше всего это сделать?
UPDATE:
Используя выбранный ответ, я смог сделать это:
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']} />