How to display every image inside an image folder in react
javascript, jsx, loops, reactjs
Solution
I had the same scenario where I have to pick `images` or `SVG`s from the folder and display it. Below is the process I followed :
Folder structure
-public
-src
|-component
|-images
|-1.png
|-2.png
|-3.png
.
.
|-some x number.png
In `component` where ever you want to consume the `image` there, you have to do this:
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
var listOfImages =[];
class App extends React.Component{
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
listOfImages = this.importAll(require.context('./images/', false, /\.(png|jpe?g|svg)$/));
}
render(){
return(
<div>
{
listOfImages.map(
(image, index) => <img key={index} src={image} alt="info"></img>
)
}
</div>
)
}
}
It worked for me; Give it a try.
Problem
I have an image folder in my `create-react-app` project with a bunch of images. I want to display every single image in the components. ``` ├── Components │ ├── Icons │ │ ├── Icon.jsx (I want to display every single icon) │ │ ├── Images │ ├── Icons │ │ ├── ... (over 100 SVG icons) ``` In my .jsx file, I want to loop over every image/icon and display it. Icons.jsx ``` import React, { Component } from 'react'; import Icons from '../../Images/Icons'; class Icons extends Component { render() { return ( //Loop over every icon and display it ); } } ```