部署到 Vercel 后，图像将无法在 Next.js 14.0.2 应用程序中加载

Question

我正在学习 nextjs https://nextjs.org/learn/dashboard-app 我到达了最后，但现在我已经部署了我的应用程序，我看到图像没有加载，但它们正在我的本地计算机上加载：

本地主机：

Vercel 部署：

我用过

import Image from 'next/image';

这就是我的实现方式：

图像所在的文件夹：

我的

next.config.js

文件：

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = nextConfig;

我还使用中间件进行身份验证。 :

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

export default NextAuth(authConfig).auth;

export const config = {
  // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
  matcher: ['/((?!api|_next/static|_next/image|_next/public|.*\\.png$).*)'],
};

我尝试通过以下方式更改图像路径：

 <Image src="/hero-desktop.png"/>
 <Image src="./hero-desktop.png"/>
 <Image src="/public/hero-desktop.png"/>
 <Image src="./public/hero-desktop.png"/>

//or putting the image in a subfolder:
 <Image src="/static/hero-desktop.png"/>

但似乎没有任何作用，我该怎么办？为什么会发生这种情况？ 我看过所有类似的问题。

Answer 1

图像应位于根文件夹中公共文件夹内的图像文件夹中。