如何在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/']
  }
};

- Dijiflex

---

“not working” 是什么意思？检查器中的网络选项卡对于图像的加载告诉了你什么？呈现的标记看起来是什么样子？ - Dominik

Answer 1

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

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

我还怀疑您的控制台存在以下错误，参考此源代码：

domains值必须遵循格式{ domain: 'picsum.photos', ... }。 请在这里查看更多信息

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

- Cameron Hurd