无法在 Next 12 中使用本地文件图像

Question

在 Next js 中使用 Next 版本 12 创建了一个新项目。

每当我尝试导入和使用 /public 目录中的图像文件时，我都会遇到构建失败的问题。

../public/images/header-logo.jpg
TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:5575:34)
    at node:internal/deps/undici/undici:5901:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:202:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

图片在public目录下，我没有next.config.js文件。

此错误仅在构建期间抛出。如果我导入图像文件，则不会引发任何错误。

如果我将它用作 next/image 组件中的 src 属性，则会抛出构建错误。

Answer 1

不应请求或导入图像。要使用图像，您应该只使用路径 /images/header-logo.jpg

或

<Image src="/images/header-logo.jpg" width=xxx height=xxx />

Answer 2

耗时4小时，发现是我安装的Node实验版问题

降级到版本 16 解决了这个问题。

无法在 Next 12 中使用本地文件图像

Can't use local file images in Next 12

node.js

webpack

next.js