Next.js Image组件解析协议相对URL报错求助

核心原因 #

报错是因为Next.js的Image组件不支持协议相对URL（//开头），普通img标签可自动补全协议，但Image组件要求明确的绝对URL或正确的本地资源导入方式。

适配方案 #

针对你图片存于assets文件夹、文件名来自data.json的props.dish.image的场景，提供以下可行方案：

方案1：使用public文件夹存放图片（推荐） #

Next.js默认将public文件夹下的资源作为静态资源，可直接通过路径访问：

1. 将assets文件夹内的图片移至项目根目录的public文件夹（例如public/images/burger.png）
2. 在Image组件中使用相对于public的绝对路径：

import Image from 'next/image';

function DishCard({ dish }) {
  return (
    <Image
      src={`/images/${dish.image}`}
      alt={dish.name}
      width={300}
      height={300}
    />
  );
}

该方式无需额外配置，Next.js会自动处理图片优化。

方案2：通过import导入本地图片 #

若不想移动图片至public，可在组件中手动导入图片，再将导入后的对象传给Image组件：

静态导入（适合少量固定资源）

import Image from 'next/image';
import burgerImg from '../assets/burger.png';

function DishCard({ dish }) {
  const imageMap = {
    'burger.png': burgerImg,
    // 其他图片映射...
  };
  
  return (
    <Image
      src={imageMap[dish.image]}
      alt={dish.name}
      width={300}
      height={300}
    />
  );
}

动态导入（适合大量资源）

import Image from 'next/image';

function DishCard({ dish }) {
  const imageSrc = require(`../assets/${dish.image}`).default;
  
  return (
    <Image
      src={imageSrc}
      alt={dish.name}
      width={300}
      height={300}
    />
  );
}

注意：需确保dish.image的文件名与assets内的文件完全一致（包括后缀）。

方案3：配置next.config.js允许相对协议URL（不推荐） #

若必须保留协议相对URL，可在配置文件中添加规则，但该方式适合远程图片，本地资源不建议使用：

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '_next',
        pathname: '/static/media/**',
      },
    ],
  },
};

此方式会绕开Next.js的本地图片优化能力，优先级低于前两种方案。

验证要点 #

• 确保Image组件的src不是//开头的协议相对URL，要么是public下的绝对路径，要么是导入的图片对象
• 必须指定width和height属性，或使用fill（Next.js 13+）、layout="responsive"（Next.js 12及以下）等布局属性

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