How to display an Image with next.js?

Question

i'm currently trying to display images with next, but even if the src is correct, it never works. I found out in the documentation that a loader function could help to resolve the issue but it does.

const PhotographerCard = (props) => {

    const loader = ({ src }) => {
        return src
    }

  return (
    <Card>
        <div className='photo'>
            <Image 
                src='/../../assets/PhotographersPhotos/EllieRoseWilkens.jpg' 
                alt={props.photographer.name} 
                width='200px' 
                height='200px' 
                loader={loader}
            />
            <Name>{props.photographer.name}</Name>
            <Location>{props.photographer.city + ', ' + props.photographer.country}</Location>
            <p>{props.photographer.tagline}</p>
        </div>
    </Card>
  )
}

I also have the error displaying on the browser even if the path is correct.

EllieRoseWilkens.jpg:1          GET http://localhost:3000/assets/PhotographersPhotos/EllieRoseWilkens.jpg 404 (Not Found)

is `assets` a directory inside the `public` directory of next.js? — whygee, Jul 21 '22 at 23:01

score 0 · Accepted Answer · answered Jul 22 '22 at 06:47

0

assets directory and all static (images, icons, fonts, robot.txt...) stuff should be inside the public folder to be accessible.

Relevant docs.

answered Jul 22 '22 at 06:47

whygee

1,783
6
12

How to display an Image with next.js?

1 Answers1