javascript - Displaying all images in a folder in React using webpack shows broken icons

Question

I'm working on an application in React and I want to display all images in a folder. I'm using webpack and I have this structure:

->src
   ->image_display (folder containing the React component I want to use and a folder with the images)
            image.js 
            ->images
                 Image01.jpg
                 Image02.jpg
                 Image03.jpg

My code is

class Images extends Component{

constructor(props) {
        super(props);
        this.state = {
            ListOfImages: []
       }
}


importAll(r) {
        return r.keys().map(r);
    }

componentDidMount() {
        let ListOfImages = this.importAll(require.context('./images/', false, /.(png|jpe?g|svg)$/));
        console.log(ListOfImages)
        this.setState({ListOfImages:ListOfImages})
    }

 render() {
        return(
            <div>
                {
                    this.state.ListOfImages.map(
                        (image, index) =>    <img key={index} src={image} alt="Image"></img>
                    )
                }
            </div>
        )

 }

}

Instead of images React shows broken icons. What can be the problem? Can the path be wrong? Thank you!

question from:https://stackoverflow.com/questions/65884522/displaying-all-images-in-a-folder-in-react-using-webpack-shows-broken-icons

Answer 1

Waitting for answers