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

Posted 2023-03-06

【中文标题】如何在 Next.js 中加载外部图像？

【英文标题】：How can I load external images in Next.js?

【发布时间】：2021-04-28 17:45:47

【问题描述】：

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/']
  
;

【问题讨论】：

not working 是什么意思？检查器中的网络选项卡告诉您有关图像加载的什么信息？渲染后的标记是什么样的？

【参考方案1】：

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

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

我还怀疑您的控制台中出现如下错误，关闭this source code：

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