Метод динамического импорта WebPack возвращает пустой массив вместо файлов в реагий, Как решить?

Question

Как импортировать и использовать изображения в Reactjs?Я импортировал все изображения из папки, но он не возвращает массив со ссылками.проверьте это.

    function importAll(r) {
    return r.keys().map(r);
  }
    const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
    console.log(images);

Проверьте этот снимок экрана консоли:

Пожалуйста, помогите мне в этом!

Структура папки:

--src>
  --components>
      Projects.jsx
  --img>
       images

Я пытаюсь импортировать его в компонент Projects.но, как это сделать?

import React from 'react';
import '../App.css';

function importAll(r) {
    return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
console.log(images);

Пожалуйста, помогите загрузить все изображения и использовать их.

Answer 1

правильное требование для вас будет:

importAll(require.context('./img', false, /\.(png|jpe?g|svg)$/));

Из документов:

require.context('./test', false, /\.test\.js$/);
// a context with files from the test directory that can be required with a request endings with `.test.js`.


require.context('../', true, /\.stories\.js$/);
// a context with all files in the parent folder and descending folders ending with `.stories.js`.