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
);
}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With