Next.js图片配置问题：配置HTTP/HTTPS图片源后HTTP无法生效

你写的protocol: "https" || "http"是无效写法——JavaScript里逻辑或||会直接返回第一个真值，也就是"https"，所以这个配置实际上只匹配了HTTPS协议的图片，HTTP的完全没被纳入规则里。

要同时支持HTTP和HTTPS，需要在remotePatterns里添加两个独立的规则，分别对应两种协议：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      // 匹配HTTPS协议的图片
      {
        protocol: "https",
        hostname: "**",
        port: "",
        pathname: "/**",
      },
      // 匹配HTTP协议的图片
      {
        protocol: "http",
        hostname: "**",
        port: "",
        pathname: "/**",
      },
    ],
  },
};

export default nextConfig;

• 用hostname: "**"会允许所有域名的图片，生产环境不建议这么做，最好限制为你实际需要的域名，避免潜在的安全风险和资源滥用。
• 修改配置后，记得重启Next.js开发服务器，否则新配置不会生效。

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