Next.js 13：remotePatterns的port属性对Image组件不生效求助

问题出在Next.js remotePatterns的严格匹配逻辑上：
你的图片URL是https://not-real-url.com/wp-content/uploads/not-real-logo.png，这里没有显式带:443端口后缀；但你在配置里指定了port: "443"，这就导致匹配规则和实际请求URL不吻合，所以加载失败。而当你把port设为空字符串时，相当于不限制端口，自然能匹配到默认使用443端口的HTTPS请求。

解决办法 #

方案一：推荐做法，省略port配置

HTTPS协议的默认端口就是443，Next.js会自动匹配不带端口的HTTPS请求，直接去掉port项即可：

module.exports = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "not-real-url.com",
        pathname: "/wp-content/uploads/*",
      },
    ],
  },
};

方案二：显式带端口（不推荐）

如果一定要保留port配置，需要把图片URL改成带:443的形式，比如：

<Image
  src="https://not-real-url.com:443/wp-content/uploads/not-real-logo.png"
  width={50}
  height={50}
  alt="An image"
/>

但这种写法不符合常规HTTPS URL的使用习惯，不建议采用。

补充说明 #

当目标资源使用的是协议默认端口（HTTP默认80、HTTPS默认443）时，remotePatterns不需要指定port；只有当资源使用非默认端口时，才需要在配置里指定对应的port，同时URL中也要显式带上该端口。

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