javascript - 在 react 中循环图像的最佳方式

Question

我已经使用 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 not found: Can't resolve './images/wd/' in'/mywebsite/src/components'

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

Answer 1

这是正确答案 Dynamically import images from a directory using webpack您不能仅使用“导入”同时导入整个目录

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

UPD:所以在你的情况下删除 import，将 images 与 url 交换并将 listOfImages 添加到状态

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;