Next.js 的 next/image 不支持协议相对路径（如 //_next/static/...），需改用 public 目录下的绝对路径（如 /assets/burger.png）或静态导入方式，才能避免解析失败错误。
next.js 的 `next/image` 不支持协议相对路径（如 `//_next/static/...`），需改用 `public` 目录下的绝对路径（如 `/assets/burger.png`）或静态导入方式，才能避免解析失败错误。
在 Next.js 中，next/image 是一个高度优化的图像组件，但其 src 属性对路径格式有严格要求：仅接受绝对路径（以 / 开头）、data: URL 或合法的 HTTP(S) 外部 URL。它不支持协议相对 URL（如 //_next/static/media/xxx.png），而这种路径恰恰是动态 import() 返回的默认 src 值（由 Webpack/Next 构建生成），因此直接赋值会导致报错：
Error: Failed to parse src "//_next/static/media/dbl-cheese-burger.4ac73aa3.png" on `next/image`
✅ 推荐解决方案：将图片移至 public/assets/ 目录
Next.js 会自动将 public 目录下的文件映射为根路径可访问的静态资源。例如，将 burger.png 放入 public/assets/burger.png 后，即可通过 /assets/burger.png 直接引用：
import Image from "next/image";
import { useState, useEffect } from "react";
interface PropsData {
dish: {
id: number;
name: string;
price: number;
description: string;
image: string; // e.g., "burger.png"
};
}
function Card({ dish }: PropsData) {
// ✅ 安全、简洁、无需异步加载
const imagePath = `/assets/${dish.image}`;
return (
<div>
<image width="{150}" height="{150}" alt="{dish.name}" src="%7BimagePath%7D" next.js priority="{false}"></image>
</div>
);
}
export default Card;
⚠️ 注意事项：
- 确保
public/assets/下存在对应文件（大小写敏感），否则返回 404； -
public中的资源不经过构建时优化处理（如尺寸裁剪、格式转换），但next/image会在客户端/服务端按需生成优化后的<img>标签（含srcSet、sizes、懒加载等）； - 若需构建时静态分析与深度优化（如自动生成 WebP、AVIF），应改用
import静态导入（见下方备选方案）；
? 备选方案（高级）：静态导入 + 类型安全（适用于已知图片列表）
若图片集固定且数量可控，可配合 require.context 或显式 import 实现类型安全与构建时优化：
// utils/imageMap.ts
const imageMap: Record<string string> = {
"burger.png": require("../public/assets/burger.png").default,
"cheese-burger.png": require("../public/assets/cheese-burger.png").default,
// ... 其他映射
};
export const getImageSrc = (filename: string): string => {
return imageMap[filename] || "/assets/placeholder.png";
};</string>
然后在组件中使用：
src={getImageSrc(dish.image)}
? 总结：
不要依赖 import(...) 动态获取 next/image 的 src —— 它返回的是内部构建路径，非运行时有效 URL。将图片统一放入 public/assets/ 并使用 /assets/xxx.png 形式的绝对路径，是最简单、可靠且符合 Next.js 最佳实践的方式。
