如何在Next.js配置文件中为图片添加多个主机名和路径名？

你的配置错误在于每个remotePatterns对象只能对应单个主机名，不能用数组传递多个hostname；同时hostname不能包含https://前缀；另外如果pathname写具体路径，会限制只能加载该特定路径的图片，通常建议用通配符匹配主机下的目标图片路径。

修正后的next.config.js配置如下：

module.exports = {
  images: {
    remotePatterns: [
      // 配置i.ibb.co主机
      {
        protocol: 'https',
        hostname: 'i.ibb.co',
        port: '',
        pathname: '/**', // 匹配该主机下所有路径的图片
      },
      // 配置pexels主机（去掉https://前缀）
      {
        protocol: 'https',
        hostname: 'www.pexels.com',
        port: '',
        pathname: '/search/travel/**', // 匹配travel搜索路径下的所有图片，可按需调整
      },
    ],
  },
};

关键注意点： #

• 每个远程主机必须单独创建一个remotePattern对象，不能在同一个对象内放置多个hostname。
• hostname仅需填写纯域名，无需添加http://或https://前缀。
• pathname中的/**是通配符，代表匹配该路径下的所有子路径；如果仅需允许特定路径，可调整通配符规则，比如/x59q5zG/**只允许该目录下的图片。

配置完成后重启Next.js开发服务器，即可正常加载来自这两个主机的图片。

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