I have a React component that will have nearly a hundred images, and so want to load them via one import statement from another JavaScript file.
But first I need to figure out how to put them all in an array somehow so I can export them from that JavaScript file.
Is something like this possible:
So I can access the images like this?
bulkImages.js v1 (your way is possible)
import image1 from './images/image1.jpg'
import image2 from './images/image2.jpg'
import image3 from './images/image3.jpg'
import image4 from './images/image4.jpg'
import image5 from './images/image5.jpg'
const bulkImages = [
image1,
image2,
image3,
image4,
image5,
];
export default bulkImages;
bulkImages.js v2 (but this version is shorter)
const bulkImages = [
'./images/image1.jpg',
'./images/image2.jpg',
'./images/image3.jpg',
'./images/image4.jpg',
'./images/image5.jpg'
];
export default bulkImages;
To display images from array in your component use the map() function.
YourComponent.js
import React from 'react';
// images data
import bulkImages from './bulkImages';
export default function YourComponent() {
return (
<div className="bulkImageArea">
{bulkImages.map((img) => (
<img key={img} src={img} alt={img} className="bulkImage" />
))}
</div>
);
}
