Javascript 在react中循环图像的最佳方法

我用CreateReact应用程序创建了一个项目，在源代码中有一个名为images的文件夹。 我想在images文件夹中循环并显示它们

到目前为止，我的代码如下所示：

import React，{Component}来自“React”
从“./images/wd/”导入图像
常量列表图像=[]
类Myloop扩展组件{
入口（右）{
返回r.keys（）.map（r）
}
组件willmount（）{
listOfImages=this.importAll（require.context（images，false，/\（png）$/）
}
render（）{
返回(


{listOfImages.map（（图像，索引）=>(
))}


)
}
}
导出默认Myloop

保存文件后，终端上显示以下消息：

未找到模块：无法解析中的“./images/wd/” “/mywebsite/src/components”

---

我不确定是什么问题，但任何帮助都会很好。

这里是正确的答案 您不能仅使用“导入”同时导入整个目录

UPD：因此，在您的情况下，删除

导入

，用url交换

图像

，并将

列表图像

添加到状态

import React, { Component } from "react";

class Myloop extends Component {
  constructor(props) {
    super(props);
    this.state = { listOfImages: [] };
  }
  importAll(r) {
    return r.keys().map(r);
  }

  componentWillMount() {
    const list = this.importAll(
      require.context("./images/wd", false, /\.(png)$/)
    );
    this.setState({
      listOfImages: list
    });
  }

  render() {
    return (
      <>
        <ul>
          <li>
            {this.state.listOfImages.map((image, index) => (
              <img src={image} key={index} alt="info"></img>
            ))}
          </li>
        </ul>
      </>
    );
  }
}

export default Myloop;

import React，{Component}来自“React”；
类Myloop扩展组件{
建造师（道具）{
超级（道具）；
this.state={listOfImages:[]}；
}
入口（右）{
返回r.keys（）.map（r）；
}
组件willmount（）{
const list=this.importAll(
require.context（“./images/wd”，false，/\（png）$/）
);
这是我的国家({
列表图像：列表
});
}
render（）{
返回(


{this.state.listOfImages.map（（图像，索引）=>(
))}


);
}
}
导出默认Myloop；

看看这个问题：

require.context（images

可能应该是

require.context（'./images/wd/'

@Dominik）。我尝试了许多这样的方法，但根本不起作用。最新版本中没有webpack.config.js。@cbr，路径最初与您描述的一样，但即使如此，错误仍然是“找不到模块：无法解析“/mywebsite/src/components”中的“/images/wd/”仍然存在。图像路径中的“/wd/”是什么？这是正确的。谢谢@Julka。我实现了它，它工作起来很有魅力。不过，如果我的图像文件夹在components文件夹之外，它不会加载。有什么想法吗？@ffas，请将路径从“/images/wd”更改为needed

import React, { Component } from "react";

class Myloop extends Component {
  constructor(props) {
    super(props);
    this.state = { listOfImages: [] };
  }
  importAll(r) {
    return r.keys().map(r);
  }

  componentWillMount() {
    const list = this.importAll(
      require.context("./images/wd", false, /\.(png)$/)
    );
    this.setState({
      listOfImages: list
    });
  }

  render() {
    return (
      <>
        <ul>
          <li>
            {this.state.listOfImages.map((image, index) => (
              <img src={image} key={index} alt="info"></img>
            ))}
          </li>
        </ul>
      </>
    );
  }
}

export default Myloop;