Я использую приложение 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 `` не работал, поскольку он преобразовал переменную в строку)
Вы не можете использовать один оператор 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']} />
Я думаю, что, возможно, лучше использовать файл 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'
И это будет ваша окончательная структура папок:
Надеюсь, это поможет! ;)