next.js - 下一张图片未在生产中加载

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

Make sure to follow the casing as it is, the fileName must be typed exactly similar to what it is and that would very likely solve yourissue. No extra whitespaces, no additional symbols only file name asit is.

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

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

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

我刚刚改变了:

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

原始文件名是 phone1.PNG