I am currently attempting to display images in a component by using a map and an external JS file to store the images as objects. I then loop through them to set each one as a background image for every created div. However, it seems like my current implementation is not working as none of the images are showing up.
Component File: WorkImages.js
export default function WorkImage({workImages}) {
return (
<div>
{
workImages.map((work) => {
return (
<div style={{backgroundImage: `url(${work.image})` }} id='work-img' className='work-img' key={work.id}>
<a href=""><div className="overlay">View Work</div></a>
</div>
);
})
}
</div>
)
}
Object File Where I am Retrieving the images from when looping (image.js):
import img1 from '../public/images/filler1.jpg'import img2 from '../public/images/filler2.jpg'import img3 from '../public/images/filler3.jpg'const image = [
{
id: 1,
image: img1
},
{
id: 2,
image: img2
},
{
id: 3,
image: img3
}
]
export default image;
Main File Where I am trying to render out the divs with the dynamic background images (Work.js):
import Aos from 'aos'
import 'aos/dist/aos.css'
import {useEffect, useState} from 'react'import WorkImage from './WorkImage';import image from './image'
export default function Work() {
const [workImages, setImage] = useState(image);
useEffect(() => {
Aos.init({duration: 2000});
}, []);
return (
<section id='work' className='work-section'>
<div data-aos='fade-left'>
<h1 className="work-header">- RECENT WORK -</h1>
<div className="showcase-wrapper">
<WorkImage workImages={workImages} />
</div>
</div>
</section>
)
}