Image component not displaying images
Hey. So using NExtJS with the app directory, I have a card component with
Where the source of the card is this object:
Images is inside the public folder. Any tip on why the images aren't being rendered ?
<Image
src={'/images/cover.jpeg'}
alt="back"
className="front"
width={500}
height={500}
priority
onClick={handleClick}
/>
<Image
src={card.src}
alt="card image"
className="front"
width={500}
height={500}
priority
/><Image
src={'/images/cover.jpeg'}
alt="back"
className="front"
width={500}
height={500}
priority
onClick={handleClick}
/>
<Image
src={card.src}
alt="card image"
className="front"
width={500}
height={500}
priority
/>Where the source of the card is this object:
const cardImages = [
{ src: '/images/hiruma.jpg', matched: false },
{ src: '/images/ikki.jpg', matched: false },
{ src: '/images/ippo.jpg', matched: false },
{ src: '/images/kongo.jpg', matched: false },
{ src: '/images/kusanagi.jpg', matched: false },
{ src: '/images/luffy.jpg', matched: false },
{ src: '/images/taiga.jpg', matched: false },
{ src: '/images/takamura.jpg', matched: false },
{ src: '/images/yoko.jpg', matched: false },
];const cardImages = [
{ src: '/images/hiruma.jpg', matched: false },
{ src: '/images/ikki.jpg', matched: false },
{ src: '/images/ippo.jpg', matched: false },
{ src: '/images/kongo.jpg', matched: false },
{ src: '/images/kusanagi.jpg', matched: false },
{ src: '/images/luffy.jpg', matched: false },
{ src: '/images/taiga.jpg', matched: false },
{ src: '/images/takamura.jpg', matched: false },
{ src: '/images/yoko.jpg', matched: false },
];Images is inside the public folder. Any tip on why the images aren't being rendered ?
