Best way to loop images in react

Question

I have created a project with create-react-app and I have a folder called images inside the source. I want to loop inside the images folder and display them.

So far my code look like this:

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

After saving the file I have the following message on the terminal:

Module not found: Can't resolve './images/wd/' in '/mywebsite/src/components'

I'm not sure what is wrong, but any help will be great.

Have a look at this question: stackoverflow.com/questions/42118296/… — Dominik
– Dominik, Commented Oct 12, 2020 at 20:32
require.context(images should probably be require.context('./images/wd/' — cbr
– cbr, Commented Oct 12, 2020 at 20:53
@Dominik. I have tried many of those methods and didn't work at all. There is no webpack.config.js in the latest versions. — ffas
– ffas, Commented Oct 12, 2020 at 21:09
@cbr, the path was originally as you described, but even so, the error of "Module not found: Can't resolve './images/wd/' in '/mywebsite/src/components'" still persists. — ffas
– ffas, Commented Oct 12, 2020 at 21:10

Julia · Accepted Answer · 2020-10-13 08:31:26Z

1

Here is the correct answer Dynamically import images from a directory using webpack You cannot import the whole directory at the same time with only "import"

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

UPD: So in your case remove import, swap images with url and add listOfImages to the state

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;

edited Oct 13, 2020 at 8:31

answered Oct 12, 2020 at 21:19

Julia

7041 gold badge6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ffas Over a year ago

That's the right one. Thanks @Julka. I implemented and it works like a charm.

ffas Over a year ago

Although, if my images folder is outside the components folder, it doesn't load. Any idea?

Julia Over a year ago

@ffas, change path from "./images/wd" to needed

Collectives™ on Stack Overflow

Best way to loop images in react

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related