Next.js Image报错：已配置picsum.photos主机名仍提示未配置

问题说明 #

启动项目后触发以下错误：

Error: Invalid src prop (https://picsum.photos/200) on next/image, hostname "picsum.photos" is not configured under images in your next.config.js

已在next.config.js中通过remotePatterns配置该域名，且配置在另一台电脑可正常生效；已尝试删除.next和node_modules目录重装，问题未解决。当前next.config.js配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  basePath: "",
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "gittjeqpqcmmbterylkd.supabase.co",
        port: "",
        pathname: "/**",
      },
      {
        protocol: "https",
        hostname: "picsum.photos",
        port: "",
        pathname: "/**",
      },
    ],
  },
  webpack: (config) => {
    config.resolve.alias.canvas = false;

    return config;
  },
};

排查修复步骤 #

• 确认配置文件是否被正确加载
  检查项目启动脚本（package.json的scripts字段），是否通过--config参数指定了其他配置文件（比如next.config.dev.js），导致修改的next.config.js未生效。

• 彻底清除缓存
  除删除.next和node_modules外，执行以下操作：

  1. 清除包管理器全局缓存：
     • npm: npm cache clean --force
     • yarn: yarn cache clean
     • pnpm: pnpm store prune
  2. 重启终端和IDE，避免进程残留缓存。

• 核对Next.js版本
  确认当前项目与另一台电脑的Next.js版本一致（remotePatterns从v12.3.0开始支持）。执行npm list next查看版本，若版本差异较大，升级或降级至一致版本测试。

• 检查配置语法与格式
  执行node next.config.js验证配置文件是否存在语法错误（比如逗号遗漏、引号不匹配），有错误会直接在终端抛出。

• 排查环境变量冲突
  检查项目中的.env系列文件，是否存在NEXT_PUBLIC_IMAGE_DOMAINS等变量覆盖了next.config.js的图片配置，如有则删除或修改该变量。

• 临时切换配置方式测试
  暂时将remotePatterns替换为旧版domains配置验证：

  images: {
    domains: ["picsum.photos", "gittjeqpqcmmbterylkd.supabase.co"],
  },
  

  若此配置生效，说明remotePatterns存在隐性问题（比如pathname通配符匹配规则），再针对性调整remotePatterns写法。

内容的提问来源于stack exchange，提问作者Recep Çankaya