Next.js Image component with external dynamic source

Question

I was working on my Next.js project and while running it locally html img tag worked okay. While building, I got a warning, to change it to Image component from Next.js

So I did, but now I get a warning:

Error: Invalid src prop (https://image.ceneostatic.pl/data/products/10813131/i-dixit.jpg) on next/image, hostname "image.ceneostatic.pl" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

I read in the documentation that solution is to add a domain to next.config.js. But 2 problems occurs to me here:

Even if I specify a domain like this, it doesn't work

module.exports = { images: { domains: ['image.ceneostatic.pl'], }, };
I have my project connected to MongoDB, where are stored links to the images. What's more, I want an user to pass a link, while creating a new entry. So I don't want to have hard-coded domains, as I don't know which img an user will use.

Is there a way to omit domains list or a walk-around to use tag?

Thanks!

"Even if I specify a domain like this, it doesn't work" - Did you restart your Next.js dev server after making the changes in next.config.js? — juliomalves
– juliomalves, Commented Aug 7, 2021 at 20:26
I did, still nothing. Even if this solution worked, it doesn't satisfy me, because I want to let user add to the database any url — Ania Kowalska
– Ania Kowalska, Commented Aug 7, 2021 at 20:28
You may want to look into using a custom loader in the next/image component directly. — juliomalves
– juliomalves, Commented Aug 7, 2021 at 20:39

EJZ · Accepted Answer · 2021-08-08 15:20:58Z

5

You can use something called next Loader via the following code:

import Image from 'next/image'


const myLoader = ({ src, width, quality }) => {
  return `https://image.ceneostatic.pl/data/products/{src}/i-dixit.jpg`
}
var photoID = 10813131

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src=photoID
      width={500}
      height={500}
    />
  )
}

Your next.config.js:

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://image.ceneostatic.pl',
  },
}

All documentation is linked here.

edited Aug 8, 2021 at 15:20

answered Aug 7, 2021 at 21:09

EJZ

1,2541 gold badge9 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ania Kowalska Over a year ago

And what about the situation when I let user to add a link to his/her own picture? Then I can't hard code paths, is there a walk around?

EJZ Over a year ago

Yes, I have edited my answer to show you: take a look at the variable photoID when gets passed into the myImage function.

Alex Garcia Over a year ago

This is not a solution, you still need to hard code domains in next.config.js

Collectives™ on Stack Overflow

Next.js Image component with external dynamic source

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related