Next.js图像组件不显示图像和yarn开发服务器退出错误

Question

我试图用以下路径/public/illustrations/free_mode.jpg渲染插图，但由于某种原因，当我导航到应该渲染图像的页面时，没有找到图像，yarn dev命令退出代码137。当我检查.next文件夹时，除了导致错误的图像外，我已经在缓存中找到了所有其他图像。我的代码如下:

<Image
src="/illustrations/free_mode.jpg"
alt="illustration"
width={300} height={300}
className="w-full h-9 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
/>

它在其他图片上工作得很好，但是当我添加这张图片时，应用程序服务器崩溃了。

Answer 1

要使用本地图像，请导入。jpg， .png或。webp文件:

import freeMode from './illustrations/free_mode.jpg'
<Image
src={freeMode}
alt="illustration"
width={300} height={300}
className="w-full h-9 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
/>