Next.js+Mantine项目图片生产环境失效，本地正常问题求助

1. 验证图片域名配置 #

确保next.config.js中的图片域名配置准确，根据Next.js版本调整：

• Pages Router 或 Next.js 12及以下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['cdn.p33t.net'],
  },
}

module.exports = nextConfig

• Next.js 13+ App Router（推荐用remotePatterns做严格匹配）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.p33t.net',
        pathname: '/*',
      },
    ],
  },
}

module.exports = nextConfig

2. 本地图片路径规范 #

本地图片必须放在项目根目录的public文件夹下，引用时直接使用根路径：

<Link href="/" >
  <Image src="/logo.png" alt='logo' width={42} height={40} />
</Link>

禁止使用相对路径（如../public/logo.png），Next.js会自动映射public目录到网站根路径。

3. 部署环境静态资源检查 #

• 确认部署平台（Vercel/Netlify等）没有忽略public目录，gitignore文件中不要包含public（临时文件可单独忽略）。
• 非Vercel部署时，确保构建命令正确执行，产物中包含.next和public目录，且服务器配置正确映射静态资源路径。

4. 排查样式冲突 #

打开生产环境开发者工具，检查next/image生成的DOM元素：

• 确认图片容器和img标签没有被Mantine全局样式或自定义CSS设置display: none、opacity: 0等隐藏属性。
• 检查是否有z-index层级问题导致图片被其他元素遮挡。

5. 清除缓存强制刷新 #

• 重新部署时清理构建缓存（如Vercel部署时勾选「Skip Cache」）。
• 给远程图片URL添加版本参数（如https://cdn.p33t.net/ZKAVDSZEFH.png?v=1），避免浏览器缓存旧资源。

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