title: Next.js Image component with external dynamic source
body: <p>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</p>
  <p>So I did, but now I get a warning:</p>
  <blockquote>
  <p>Error: Invalid src prop (<a href="https://image.ceneostatic.pl/data/products/10813131/i-dixit.jpg" rel="nofollow noreferrer">https://image.ceneostatic.pl/data/products/10813131/i-dixit.jpg</a>) on <code>next/image</code>, hostname &quot;image.ceneostatic.pl&quot; is not configured under images in your <code>next.config.js</code>
  See more info: <a href="https://nextjs.org/docs/messages/next-image-unconfigured-host" rel="nofollow noreferrer">https://nextjs.org/docs/messages/next-image-unconfigured-host</a></p>
  </blockquote>
  <p>I read in the documentation that solution is to add a domain to next.config.js.
  But 2 problems occurs to me here:</p>
  <ol>
  <li><p>Even if I specify a domain like this, it doesn't work</p>
  <p>module.exports = {
  images: {
  domains: ['image.ceneostatic.pl'],
  },
  };</p>
  </li>
  <li><p>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.</p>
  </li>
  </ol>
  <p>Is there a way to omit domains list or a walk-around to use  tag?</p>
  <p>Thanks!</p>