如何在 Next.js 中加载外部图像？

Question

JavaScript 和我正在从https://picsum.photos加载随机图像，但它不起作用。请注意，目前我不想在 next.js 中使用新的图像优化。本地图像有效，但外部图像无效。下面是我的代码和 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>

下面是我的 next.js 配置

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

Answer 1

根据文档，域前面似乎不需要协议（https 或 http）。尝试

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

我还怀疑您的控制台中存在如下错误，超出了此源代码：

域值必须遵循 format { domain: 'picsum.photos', ... }。在此处查看更多信息：https://err.sh/next.js/invalid-i18n-config`

注意：对next.config.js文件的修改有时可能需要重新启动开发服务器才能生效。