TTC
Theo's Typesafe Cult•2y ago
Knox

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
MitchelInaju•2y ago
Try these two variations on the src 1. 'Images/filename.jpg' 2. './images/filename.jpg'

Did you find this page helpful?