[@astrojs/image] fetch failed when using images in public folder with Image component

[stefan-karger]

What version of astro are you using?

1.8.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows 10

Describe the Bug

When trying to use the Image component with files from the public folder like this
<Image src="/001.jpg" alt="the moon" width="400" aspectRatio="1:1" format="jpg" />
I get the following error in the console:
fetch failed

The browser console tells me it's an error 500 for this request:
GEThttp://localhost:3000/_image?f=jpg&w=400&h=400&ar=1:1&href=/001.jpg

After consulting with #support on the discord the error still couldn't be fixed, so I created a small barebones project and uploaded it to a new github repo which you can find below.

Would love to get this solved since I really start to love Astro for building sites quickly, which is the reason why I started to port my photo portfolio website from php/html/css to astro/vue/tailwind.

THANKS <3

If I can provide more info just let me now :)

Link to Minimal Reproducible Example

https://github.com/sek-consulting/astro-image-problem

Participation

• I am willing to submit a pull request for this issue.

[stefan-karger]

update: this seem to only happen with node v18

As a hopefully temporary solution I downgraded to v16.19.0 and it works just fine now.

[JerryWu1234]

mark

[duvallj]

Similar setup as @sek-consulting (Node 18 LTS, Windows 10), also having trouble with the Image component from just any file. Here is the traceback I get when running npx cross-env NODE_OPTIONS="--trace-warnings" astro build:

(node:16756) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
    at emitExperimentalWarning (node:internal/util:227:11)
    at fetch (node:internal/process/pre_execution:215:5)
    at instantiateAsync (file:///D:/Documents/Github2/website/node_modules/@astrojs/image/dist/vendor/squoosh/mozjpeg/mozjpeg_node_enc.js:446:18)
    at createWasm (file:///D:/Documents/Github2/website/node_modules/@astrojs/image/dist/vendor/squoosh/mozjpeg/mozjpeg_node_enc.js:469:7)
    at file:///D:/Documents/Github2/website/node_modules/@astrojs/image/dist/vendor/squoosh/mozjpeg/mozjpeg_node_enc.js:1659:15
    at instantiateEmscriptenWasm (file:///D:/Documents/Github2/website/node_modules/@astrojs/image/dist/vendor/squoosh/emscripten-utils.js:9:10)
    at Object.enc (file:///D:/Documents/Github2/website/node_modules/@astrojs/image/dist/vendor/squoosh/codecs.js:140:16)
    at Module.encodeJpeg (file:///D:/Documents/Github2/website/node_modules/@astrojs/image/dist/vendor/squoosh/impl.js:55:21)
    at handleJob (file:///D:/Documents/Github2/website/node_modules/@astrojs/image/dist/vendor/squoosh/image-pool.js:25:19)
    at MessagePort.<anonymous> (file:///D:/Documents/Github2/website/node_modules/@astrojs/image/dist/utils/workerPool.js:86:30)
 error   "fetch failed"
  File:
    D:\Documents\Github2\website\node_modules\astro\dist\core\errors\utils.js:50:73
  Code:
    49 | function createSafeError(err) {
    > 50 |   return err instanceof Error || err && err.name && err.message ? err : new Error(JSON.stringify(err));
         |                                                                         ^
      51 | }
      52 | function normalizeLF(code) {
      53 |   return code.replace(/\r\n|\r(?!\n)|\n/g, "\n");
  Stacktrace:
Error: "fetch failed"
    at createSafeError (file:///D:/Documents/Github2/website/node_modules/astro/dist/core/errors/utils.js:50:73)
    at throwAndExit (file:///D:/Documents/Github2/website/node_modules/astro/dist/cli/index.js:192:52)
    at cli (file:///D:/Documents/Github2/website/node_modules/astro/dist/cli/index.js:178:11)

Taking a look at @astrojs/image/dist/vendor/squoosh/mozjpeg/mozjpeg_node_enc.js:446:18, it seems to be some sort of WebAssembly loader function. git blame isn't helpful, looks like that function wasn't added anytime recently. Haven't been able to check that always calling the fallback loader works, but I can confirm that downgrading to Node 16 does, likely because that will trigger the fallback loader.

[JerryWu1234]

It works well on my Mac.
unfortunately, I didn't have a windows computer.