配置next.config.js的remotePatterns解决next/image本地API加载错误

核心问题分析 #

你遇到的错误本质是两个原因：

1. next/image要求src指向直接的图片二进制资源，但你当前的/random-img路由返回的是包含<img>标签的HTML页面，并非图片本身，组件无法解析HTML作为图片源。
2. 虽然next.config.js配置了localhost的remotePatterns，但匹配的是图片文件路径，而非HTML页面路由，因此配置未生效。

解决方案 #

方案一：修改random-img路由直接返回图片流 #

让/random-img访问时直接输出图片二进制内容，这样next/image就能正确识别：

import fs from 'fs';
import path from 'path';

function RandomImgPage() {
  // 无需返回HTML，直接在getServerSideProps中输出图片
}

export async function getServerSideProps({ res }) {
  // 读取public/img下的所有图片文件
  const imgDir = path.join(process.cwd(), 'public', 'img');
  const files = fs.readdirSync(imgDir);
  const randomIndex = Math.floor(Math.random() * files.length);
  const targetImg = files[randomIndex];
  const imgPath = path.join(imgDir, targetImg);

  // 根据图片类型设置响应头（需匹配实际文件类型，如png则用image/png）
  const ext = path.extname(targetImg).toLowerCase();
  const contentType = ext === '.png' ? 'image/png' : 'image/jpeg';
  res.setHeader('Content-Type', contentType);

  // 读取图片并输出到响应
  const imgBuffer = fs.readFileSync(imgPath);
  res.send(imgBuffer);

  // 直接返回响应，无需传递props
  return { props: {} };
}

export default RandomImgPage;

修改后，访问http://localhost:3000/random-img会直接返回图片，你的next.config.js配置保持不变即可，重启开发服务器后next/image就能正常加载。

方案二：前端直接调用API获取图片名，拼接本地路径 #

这种方式更轻量，无需额外页面路由：

1. 在使用next/image的组件中，调用API获取随机图片名并拼接路径：

import Image from 'next/image';
import { useEffect, useState } from 'react';

function RandomImageComponent() {
  const [imgSrc, setImgSrc] = useState('');

  useEffect(() => {
    const fetchRandomImg = async () => {
      const res = await fetch('/api/');
      const data = await res.json();
      // 拼接public下的图片相对路径，Next.js会自动处理静态资源
      setImgSrc(`/img/${data.image}`);
    };
    fetchRandomImg();
  }, []);

  if (!imgSrc) return <div>加载中...</div>;

  return (
    <div style={{ position: 'relative', width: '100%', height: '400px' }}>
      <Image src={imgSrc} alt="随机图片" fill />
    </div>
  );
}

export default RandomImageComponent;

2. 调整next.config.js（可选，确保本地静态资源被正确识别）：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "placeimg.com",
        port: "",
        pathname: "/720/480/**",
      },
      {
        protocol: "http",
        hostname: "localhost",
        port: "3000",
        pathname: "/**",
      },
    ],
    // 添加本地域名，确保Next.js允许加载localhost下的资源
    domains: ['localhost'],
  },
};

修改后重启开发服务器，组件会自动获取随机图片并加载。

额外注意事项 #

• 确保public/img目录下存在有效图片文件，文件名无特殊字符。
• 使用方案一时，需根据图片实际类型设置正确的Content-Type，避免浏览器无法识别。
• 修改next.config.js后必须重启开发服务器，配置才会生效。

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