How can I load external images in Next.js?

Question

JavaScript and I am loading random images from https://picsum.photos 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

<Slider
            {...settingsThumbs}
            asNavFor={nav1}
            ref={slider => setSlider2(slider)}
          >
            {slidesData.map(slide => (
              <div className='slick-slide' key={slide.id}>
                <img
                  className='slick-slide-image'
                  src={`https://picsum.photos/800/400?img=${slide.id}`}
                  alt='sfd'
                />
              </div>
            ))}
          </Slider>

below is my next.js config

module.exports = {
  images: {
    domains: ['https://picsum.photos/']
  }
};

What does not working mean? What does your network tab in the inspector tell you about the loading of the images? What does the rendered markup look like? — Dominik
– Dominik, Commented Jan 24, 2021 at 21:09

Cameron Hurd · Accepted Answer · 2023-01-26 04:36:35Z

17

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

module.exports = {
  images: {
    domains: ['picsum.photos']
  }
};

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

domains value must follow format { domain: 'picsum.photos', ... }. See more info here: https://err.sh/next.js/invalid-i18n-config`

Note: Modifications to the next.config.js file may sometimes require to to restart the dev server before they take effect.

edited Jan 26, 2023 at 4:36

answered Jan 24, 2021 at 22:10

Cameron Hurd

5,0511 gold badge26 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How can I load external images in Next.js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related