Next.js 13生产环境中Cloudinary图片无法正常显示的解决方法

问题核心 #

你遇到的问题是：next/image无法加载Cloudinary图片，替换成next-cloudinary后又只能支持Cloudinary源，没法兼容GitHub、Google头像这类其他域名的图片。结合你的next.config.js配置，问题根源大概率是Cloudinary的URL格式不符合next/image的解析要求——Cloudinary URL通常带动态变换参数（比如/w_200,h_200/），直接使用会触发安全校验或解析错误。

解决方案 #

1. 调整Cloudinary图片用法，兼容next/image #

next/image需要使用原始资源地址，而非带变换参数的Cloudinary URL，让Next.js接管图片的尺寸优化：

import Image from 'next/image';

// 正确用法：使用Cloudinary原始图片地址（不带变换参数）
const cloudinaryRawUrl = 'https://res.cloudinary.com/你的云名称/image/upload/v1234567890/图片路径.jpg';

export default function DemoImage() {
  return (
    <Image
      src={cloudinaryRawUrl}
      alt="示例图片"
      width={600}
      height={400}
      quality={80}
      placeholder="blur"
    />
  );
}

2. 优化next.config.js配置（支持动态URL） #

如果必须使用带变换参数的Cloudinary URL，用remotePatterns替代domains（Next.js 12.3+支持），精准匹配Cloudinary的URL结构：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        pathname: '/**',
      },
    ],
  },
};

注意：修改配置后必须重启开发服务器才会生效。

3. 封装通用图片组件（适配多源） #

如果需要同时支持两种组件的场景，封装一个自动判断源类型的通用组件：

import Image from 'next/image';
import { CldImage } from 'next-cloudinary';

export default function UniversalImage({ src, ...props }) {
  // 判断是否为Cloudinary源
  const isCloudinary = src.startsWith('https://res.cloudinary.com');

  if (isCloudinary) {
    // 提取Cloudinary的publicId（根据你的URL格式调整拆分规则）
    const publicId = src.split('/upload/')[1];
    return <CldImage publicId={publicId} {...props} />;
  }

  // 其他源使用next/image
  return <Image src={src} {...props} />;
}

使用示例：

// Cloudinary图片
<UniversalImage
  src="https://res.cloudinary.com/xxx/image/upload/xxx.jpg"
  alt="Cloudinary图"
  width={600}
  height={400}
/>

// GitHub头像
<UniversalImage
  src="https://avatars.githubusercontent.com/u/xxx"
  alt="GitHub头像"
  width={100}
  height={100}
/>

排查要点 #

• 确认Cloudinary URL无拼写错误，避免无效的变换参数
• 使用next-cloudinary时，确保已配置环境变量NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
• 配置修改后必须重启开发服务器，否则不会生效

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