Image component not displaying images

Hey. So using NExtJS with the app directory, I have a card component with

<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 ?

1 Reply

MitchelInaju•2y ago

Try these two variations on the src 1. 'Images/filename.jpg' 2. './images/filename.jpg'

Gaming

Programming

Image component not displaying images