IT技术 - 在react中循环图像的最佳方法 - 吾爱随笔录

我使用 create-react-app 创建了一个项目，并且在源中有一个名为 images 的文件夹。我想在图像文件夹内循环并显示它们。

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

import React, { Component } from 'react'
import images from './images/wd/'

const listOfImages = []

class Myloop extends Component {
  importAll(r) {
    return r.keys().map(r)
  }

  componentWillMount() {
    listOfImages = this.importAll(require.context(images, false, /\.(png)$/))
  }

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

export default Myloop

保存文件后，我在终端上收到以下消息：

找不到module：无法解析“/mywebsite/src/components”中的“./images/wd/”

我不确定出了什么问题，但任何帮助都会很棒。

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;