Next JS 没有在生产环境中渲染图像，没有明显的原因

Question

我正在用这个撕扯我的头发。

我用

Next.js

14 和

dev

制作了一个网站，一切都很好，做

build

然后

start

在我的本地计算机上也很好用，但是当我把它放在服务器上时......

某些图像拒绝显示，并出现 404。

我对两者使用几乎相同的 JSX，但一个显示而另一个不显示

显示的：

<Image
  src='/images/alvaro.jpg'
  alt='Portrait'
  width={100}
  height={100}
  quality={95}
  priority={true}
  className='h-24 w-24 rounded-full object-cover border-[0.15rem] border-[#f1f1f1] shadow-lg'
/>

而没有的：

<Image
  src='/images/english.jpg'
  width={50}
  height={50}
  alt='English'
  quality={95}
  priority={true}
  onClick={() => handleLanguage('en')}
  className={clsx(
    'cursor-pointer rounded-full shadow-md object-cover border-[0.12rem] border-[#f1f1f1] dark:border-0 hover:scale-110 transition',
    {
      'opacity-75': activeLang === 'es'
    }
  )}
/>

这些文件都在同一个文件夹中

/public/images

并且都是小写的。

我不知道发生了什么事。为什么它可以在我的机器上运行，但在服务器上却不能运行？

404说找不到

/_next/image?url=/images/english.jpg&w=64&q=95

但没有问题

/_next/image?url=%2Fimages%2Falvaro.jpg&w=256&q=95

Answer 1

您是否尝试过导入文件并将其呈现在 src 中，而不是插入相对路径，如下所示：

import MyImg from "path/alvaro.jpg"

<Image src={MyImg} alt={alt} width={width} height={height} />

React 有动态显示图像的方式