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

Я использую приложение create-response для моего проекта реагирования. Он имеет веб-пакет, настроенный для импорта изображений. Я хочу импортировать несколько изображений (например, 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';
...

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

Ответ 1

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

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']} />

Источник.

Ответ 2

Я думаю, что, возможно, лучше использовать файл index для папки изображений.

Предположим, у вас есть эта структура:

И вам нужно импортировать все ваши изображения в ваш HomePage компонент. Вы можете легко создать файл index.js в папке с изображениями, экспортируя все изображения с помощью require, например:

export const Background = require('./bg/background.jpg');
export const First = require('./photos/first.jpg');
export const Second = require('./photos/second.jpg');
export const LinkedIn = require('./social/linkedin.png');

Затем в свой компонент вы можете импортировать все из них с помощью одного импорта.

import {
  Background,
  First,
  Second,
  LinkedIn
} from '../../assets/images'

И это будет ваша окончательная структура папок:

Надеюсь, это поможет! ;)