CODEWITHSUNDEEP
next.jsnextjs-image
Youzef
Youzef

Reputation: 858

Nextjs Image component wont load my images

Nextjs Image component wont load my images, I've tried everything I've come across still nothing.

<div>
  {output?.map((item) => (
    <div>
      {console.log(`${apiUrl}${item.localImage}`)}
      <Image
        loader={(item) => {
          return `${apiUrl}${item.localImage}`;
        }}
        alt={item.title}
        src={`${apiUrl}${item.localImage}`}
        layout="fill"
        objectFit="contain"
        // height={98}
        // width={77}
      />
    </div>
  ))}
</div>

The console.log shows the correct image location.

http://localhost:3030/images/b/Painting-with-Both-Hands--Sophie-Walbeoffe.jpg
http://localhost:3030/images/b/DK-The-History-Book.jpg
http://localhost:3030/images/b/Cradle-to-Cradle--(Patterns-of-Life).jpg
http://localhost:3030/images/b/Upstarts.jpg

I have added localhost to next.config.js with the port and without. I think its something to do with the loader.

So what is missing?

Upvotes: 0

Views: 1429

Answers (1)

Ali AlHussain
Ali AlHussain

Reputation: 236

I think you can change the code for the loader to:

loader={() => {
      return `${apiUrl}${item.localImage}`;
    }}

Upvotes: 0

Related Questions