如何正确配置Next.js Image组件的外部URL图片加载器

问题根源 #

1. 初始配置链接重复是因为你使用了imgix加载器，同时给path配置了完整的远端前缀，而你Next/Image组件的src属性已经填写了完整的https://assets.coingecko.com/xxx路径，加载器会自动把path和你传入的src拼接，就出现了域名重复叠加的问题。
2. 修改为path: ''或者path: '/'后报500，是因为imgix加载器要求path必须是合法的http/https开头的绝对URL前缀，不符合要求就会触发服务端报错。

解决方案（两种场景二选一即可） #

场景1：不需要使用imgix优化服务，直接用CoinGecko的原图片

直接删掉所有imgix相关配置，同时新增unoptimized: true（Firebase Functions托管的Next.js环境默认不支持Next自带的图片优化能力，加这个配置可以跳过优化，直接返回原图片地址），修改后的next.config.js中images配置如下：

module.exports =  {
  images: {
    domains: ['assets.coingecko.com'],
    unoptimized: true
  },
  // 剩余其他配置保持不变
}

修改后你组件里的Next/Image直接传入完整的CoinGecko图片地址即可，不会出现拼接错误。

场景2：确实需要使用imgix优化服务

你需要修改组件内Next/Image的src属性，不要传入完整URL，只需要传入路径后缀即可，比如要加载https://assets.coingecko.com/coins/images/1/large/bitcoin.png，src就写1/large/bitcoin.png，next.config.js中images配置如下：

module.exports =  {
  images: {
    loader: 'imgix',
    path: 'https://assets.coingecko.com/coins/images/',
  },
  // 剩余其他配置保持不变
}

该场景下不需要配置domains参数，自定义加载器会自动忽略domains配置。

验证步骤 #

修改配置后先在本地执行npm run build再执行npm run start，确认本地访问没有报错后再部署到Firebase即可。

内容的提问来源于stack exchange，提问作者Leo