Чтобы импортировать все изображения из папки в React, вы можете использовать различные методы. Вот несколько подходов, которые вы можете рассмотреть:
- Использование require.context Webpack: вы можете использовать
require.context
Webpack для динамического импорта всех изображений из папки. Этот метод требует настройки в файле webpack.config.js. Вот пример:
function importAll(r) {
return r.keys().map(r);
}
const images = importAll(require.context('./your-folder', false, /\.(png|jpe?g|svg)$/));
- Использование операторов импорта ES6. Если вы заранее знаете имена файлов, вы можете импортировать их вручную с помощью операторов импорта ES6. Вот пример:
import image1 from './your-folder/image1.jpg';
import image2 from './your-folder/image2.png';
import image3 from './your-folder/image3.svg';
const images = [image1, image2, image3];
- Использование сценария сборки. Вы можете написать собственный сценарий сборки, который сканирует папку и динамически генерирует файл импорта. Сценарий может читать содержимое папки, генерировать операторы импорта и записывать их в файл. Затем этот файл можно импортировать в ваш компонент React. Этот метод требует некоторых знаний сценариев.