How can I load external images in Next.js?



JavaScript and I am loading random images from but it is not working. Note that for now, I do not want to use the new image optimization in next.js.
Local images are working but external images are not working.
Below is my code and my next.config.js

            ref={slider => setSlider2(slider)}
            { => (
              <div className='slick-slide' key={}>

below is my next.js config

module.exports = {
  images: {
    domains: ['']


Per the docs, the domain does not appear to need a protocol (https or http) in front of it. Try

module.exports = {
  images: {
    domains: ['']

I also suspect you have an error like the following in your console, going off this source code:

domains value must follow format { domain: '', ... }.
See more info here:`

Answered By – Cameron Hurd

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More