在 next.js 中，`/contents/` 目录下的图片无法直接通过 url 访问，因为 next.js 仅将 `public/` 目录作为静态资源服务根路径；需将封面图移至 `public/` 或配置远程图源并启用 `next/image` 域名白名单。
Next.js 默认不提供对 app/ 或 contents/ 等自定义目录的静态文件服务。你当前尝试访问的路径 http://localhost/contents/blogpost1/cover.png 实际上未被 Web Server 映射，因此会返回 404。这是初学者常见误区——误以为项目内任意文件夹下的图片都能被浏览器直接请求。
✅ 正确做法是：所有前端可直取的静态资源（如封面图、图标、字体）必须放在 public/ 目录下。Next.js 构建时会自动将 public/ 下的文件映射到站点根路径（即 /），例如：
my-blog/ ├── public/ │ ├── images/ │ │ ├── blogpost1.png │ │ └── blogpost2.png ├── app/ ├── contents/
此时，你的 page.js 应改为：
// app/[slug]/page.js
import { notFound } from 'next/navigation';
export default function BlogPost({ params }) {
const { slug } = params;
// 假设你已通过 fs + gray-matter 解析出 post 对象
const post = getPostBySlug(slug); // 自定义函数，略
if (!post) notFound();
return (
{post.data.title}
{/* ✅ 正确：从 public/images/ 下读取 */}
@@##@@
);
}⚠️ 注意事项：
- 文件命名需严格匹配：public/images/blogpost1.png ↔ slug = 'blogpost1'
- 若希望保留原目录结构（如每篇博客自带 cover.png），可在构建前用脚本自动拷贝：
# 示例：构建前执行（package.json scripts） "build:copy-images": "cp -r contents/*/cover.png public/images/", "build": "npm run build:copy-images && next build"
- 如使用 next/image 组件提升性能与响应式支持，务必在 next.config.js 中配置可信域名：
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['images.unsplash.com', 'your-cdn-domain.com'], // ✅ 必须显式声明
},
};
module.exports = nextConfig;然后在组件中安全使用：
import Image from 'next/image';
? 总结：Next.js 的静态资源服务边界清晰且不可绕过——public/ 是唯一前端可直访的静态文件根目录。无论是本地图片还是远程图源，都必须遵循该规则：本地图放 public/ 并用绝对路径引用；远程图则需在 next.config.js 中添加 images.domains 白名单。切勿尝试通过 fs 动态读取并拼接非 public 路径，这既不安全也不符合 SSR/SSG 渲染逻辑。
