Can't use local file images in Next 12-CodePudding

Created a new project in Next js with Next version 12.

Whenever I try to import and use an image file in the /public directory I get a build failure.

../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)

The image is in the public directory, I have no next.config.js file.

This error is only thrown during a build. If I import the image file no error is thrown.

If I use it as the src property in a next/image component, then the build error is thrown.

CodePudding user response：

After losing 4 hours of my life, it turns out the issue was the experimental version of Node I installed.

Downgrading to version 16 fixed this issue.

CodePudding user response：

Images should not be requested nor imported. To use images you should just use the path /images/header-logo.jpg

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