我已经完成了关于Next.js的基础课程，其中我通过以下方式使用了Image组件:
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
></Image>
hero-desktop.png在public目录中，app目录中有所有的路由.
这起到了天衣无缝的作用.
现在，在其他Next.js项目中，我想使用相同的(以便优化图像处理)，所以我遵循了相同的步骤:
-
创建所需的图像
author-image.jpg并将其放入public目录，与app目录一起创建. -
添加以下代码:
<Image
src="/author-image.jpg"
width={200}
height={200}
alt="Michał Turczyn"
loading="eager"
></Image>
在此设置之后，对于获取图像的请求，我只收到Bad Request个响应:
我还try 了其他解决方案:try 导入图像并将src属性设置为该导入的值:
import authorImage from '/author-image.jpg';
和
<Image
src={authorImage}
width={200}
height={200}
alt="Michał Turczyn"
loading="eager"
></Image>
也试过了
import authorImage from 'author-image.jpg';
Both attempts resulted in error:
另外，我设置了loading='eager'来覆盖来自Next.js的默认值loading='lazy'.它对有问题的行为没有任何影响.
如何正确加载图像？为什么会出现这个问题？