下一个图像未在生产中加载

Question

我正在使用 NEXT 构建我的网络应用程序。在我的开发服务器中，一切运行顺利，所有图像都按预期显示，但当我运行时，next build图像next start会在开发服务器中消失。

不知道为什么会发生这种情况有人可以帮助我吗？

我的文件夹结构如下图：

- public
---- pictures
------ icons
-------- iphone
---------- phone1.png

以下是我将其放入组件中的方式：

<div className={classes['stack-phone-v1']}>
              <Image
                alt={'phone-image-1'}
                height={567}
                width={284}
                src='/pictures/icon/iphone/phone1.png'
              />
            </div>

Answer 1

尝试使用

<Image
   unoptimized
/>

这对我有用，因为优化的请求在生产中失败了。

Answer 2

确保遵循大小写，文件名的输入必须与实际内容完全相同，这很可能会解决您的问题。没有额外的空格，没有额外的符号，只有文件名。

在跟进其他论坛后，我意识到这对我来说是一个非常愚蠢的错误。在开发服务器中运行图像时，大小写并不重要，我的图像是iphone.PNG并且我将其读取为iphone.png.

这非常重要，因为它在开发服务器中未被检测到，并且在生产中也不会加载。我在 github 上看到了一个巨大的线程，怀疑这就是原因：

通常，当您看到文件已加载但其中一些未加载时，请确保所有文件的大小写与名称完全匹配。更改导入语句解决了我的错误。我希望这对将来可能面临同样问题的人有所帮助。

我刚刚改变：

src='/pictures/icon/iphone/phone1.png' 到 src='/pictures/icon/iphone/phone1.PNG'

原来的文件名是phone1.PNG