Импорт нескольких файлов в react

Я использую create-react-app для моего проекта react. Он получил webpack, настроенный для импорта изображений. Я хочу импортировать несколько изображений (скажем, 10) из папки изображений в компонент. Самый простой способ сделать это - добавить несколько операторов импорта, таких как - 

import Img0 from '../images/0.png';
import Img1 from '../images/1.png';
import Img2 from '../images/2.png';
import Img3 from '../images/3.png';
import Img4 from '../images/4.png';
import Img5 from '../images/5.png';
import Img6 from '../images/6.png';
...

приведенный выше код не будет хорошим выбором, когда у нас есть множество файлов для импорта. Есть ли способ добавить операторы import в цикл? Я попытался добавить цикл for, но мне не удалось изменить переменные Img0, Img1 и т. д. (использование ES6 " не сработало, поскольку оно преобразовало переменную в строку)

6
ecmascript-6 javascript reactjs

1 ответов

вы не можете использовать один оператор импорта, но вы можете сделать это:

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/'));

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

источник.

8