Как динамически импортировать папку с изображениями в React? ⇐ Javascript

[Anonymous]

В моем приложении React у меня есть страница истории, которая отображает много изображений для каждого года. Поскольку я не могу использовать бэкэнд для этого проекта, все мои картинки находятся на моем фронте. Имея сотни из них, импорт их вручную не является возможностью.
Я сначала попробовал это в моей годовой историю < /code> компонент: < /p>

Код: Выделить всё

  const { year } = useParams();

const pictures = useMemo(() => {
const images = require.context(`../../assets/history/${year}/images`, true);
const imagesList = images.keys().map((image) => images(image));
const imagesArray = imagesList.map((image, index) => {
return 
[img]{image} alt={`image-${index}`} /[/img]
;
});
return imagesArray;
}, [year]);

Но у вас не может быть динамический URL с redition.context () , и вы не можете использовать эту функцию внутри компонента React.
Итак, я придумал идею о том, что файл утилиты индексировал URL -Верд ">

Код: Выделить всё

const images2024 = require.context(`../../assets/history/2024/images`, true);
export const indexedImports = {
2024: images2024,
};

, который я затем импортировал в компоненте года , как это:

Код: Выделить всё

  const { year } = useParams();

const pictures = useMemo(() => {
const images = indexedImports[year];
const imagesList = images.keys().map((image) => images(image));
const imagesArray = imagesList.map((image, index) => {
return 
[img]{image} alt={`image-${index}`} /[/img]
;
});
return imagesArray;
}, [year]);

Но использование этого метода делает мое приложение сбоем без особой информации.
РЕДАКТИРОВАТЬ: Похоже, слишком много картин. Первая папка, которую я попытался проверить его, имела более 700 снимков, что было слишком много (терминал, вышел из строительства, не удался, потому что процесс вышел слишком рано. Это, вероятно, означает 9

Код: Выделить всё

 on the process.

. Я попробовал с папкой, в которой есть 25, и она отлично работает с моим решением для файлов индексации. Есть ли способ загрузить сотни картинок на фронта или размещать их на бэкэнд единственным способом?


Подробнее здесь: https://stackoverflow.com/questions/794 ... y-in-react