javascript - webpack动态导入方法在reactjs中返回空数组而不是文件，如何解决？

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

我正在尝试将其导入到项目组件中。但是，如何做到这一点？

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`.