Next.js加载SpringBoot API存储的图片报错，寻求解决方案

核心错误原因 #

1. ERR_UNKNOWN_URL_SCHEME：图片URL缺少http:///https://协议，浏览器将localhost:6969识别为未知协议而非HTTP地址，导致请求无法正常发送。
2. Next.js外部图片域名限制：Next.js默认仅允许加载同域名或预先配置的外部域名图片，未配置的情况下会拦截外部图片请求。
3. Loader参数未合规实现：自定义loader未接收width等要求参数，触发了警告，但这并非图片无法加载的核心问题。

分步解决方案 #

1. 修复URL格式 #

所有外部图片URL必须带上HTTP/HTTPS协议，示例：

http://localhost:6969/assets/download/1

2. 配置Next.js允许外部图片域名 #

在项目根目录的next.config.js中添加以下配置，授权SpringBoot服务的图片域名：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'http', // 若使用HTTPS则改为https
        hostname: 'localhost',
        port: '6969',
        pathname: '/assets/download/**', // 匹配所有下载路径下的图片
      },
    ],
  },
}

module.exports = nextConfig

修改完成后需重启Next.js开发服务器。

3. 正确使用Image组件 #

方式一：默认Loader + 关闭优化（推荐，适配你的API逻辑）

通过unoptimized属性跳过Next.js的图片优化逻辑，无需自定义loader：

<Image
  src="http://localhost:6969/assets/download/1"
  alt="image"
  width={100}
  height={100}
  unoptimized
/>

方式二：自定义Loader（适用于需额外逻辑的场景）

若必须使用自定义loader，需保证函数接收src、width、quality参数（即使你不需要使用这些参数）：

const customImageLoader = ({ src, width, quality }) => {
  // 无需额外处理的话直接返回原地址即可
  return src;
};

<Image
  loader={customImageLoader}
  src="http://localhost:6969/assets/download/1"
  alt="image"
  width={100}
  height={100}
/>

关于“只能从public文件夹加载”的误区 #

Next.js完全支持加载外部图片，无需将图片下载到public文件夹。只要正确配置remotePatterns授权对应外部域名，即可直接加载外部资源。

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