Next.js静态图片本地正常，Cloudflare Pages部署后报404

问题描述 #

我在Next.js项目中将所有静态图片放在public/images/目录下，使用Next.js的Image组件引入，本地localhost运行完全正常，但部署到Cloudflare Pages后图片无法找到。

相关代码 #

image.tsx #

return (
<Image
  src="/images/frame1.png"
  width="1000"
  height="1000"
  alt="Control description"
  style={{
    height: "auto",
    maxWidth: "100%",
    userSelect: "none",
  }}
/>
)

next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

环境与截图 #

• 部署环境：Cloudflare Pages
• 部署截图：
• 本地运行截图：
• 文件结构截图：

求排查问题原因并给出解决方案。

解决方案 #

1. 检查路径大小写一致性 #

本地系统（Windows/macOS）默认不区分文件路径大小写，但Cloudflare Pages基于Linux环境，严格区分大小写。

• 核对代码中/images/frame1.png与public/images/下实际文件名的大小写是否完全匹配，避免出现实际文件为Frame1.png但代码写frame1.png的情况。

2. 禁用Next.js图片优化 #

Next.js默认的图片优化服务无法在Cloudflare Pages直接生效，会导致生产环境图片路径解析错误。修改next.config.js添加图片配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    unoptimized: true, // 禁用图片优化，使用原始路径
  },
};

module.exports = nextConfig;

修改后重新构建部署，Image组件会直接引用原始图片路径，避免优化后的路径找不到资源。

3. 确认部署时public目录完整上传 #

• 检查项目.gitignore文件，确认未误排除public/images/目录；
• 查看Cloudflare Pages部署日志，确认public/images/下的图片文件已被正确上传；
• 若使用静态导出，需确保构建命令为next build && next export，并在Cloudflare Pages配置中指定输出目录为out。

验证步骤 #

直接访问生产环境图片的原始路径（如https://你的域名/images/frame1.png）：

• 若返回404，说明文件未上传或路径错误；
• 若能正常访问，说明问题出在Next.js Image组件的优化配置上，按步骤2处理即可。

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