Unable to read static Image files in /public using IPX as provider on vercel, seeing [404] [IPX_FILE_NOT_FOUND] error

1. Issue

Unable to read static Image files in /public using ipx as provider on vercel, seeing [404] [IPX_FILE_NOT_FOUND] error.

{
    "error": {
        "message": "[404] [IPX_FILE_NOT_FOUND] File not found: /nuxtImage.png"
    }
}

This works in both local dev and production (Vercel) environment.

<img style="width: 300px" src="public/nuxtImage.png" />

This only works in local dev environment and get [404] [IPX_FILE_NOT_FOUND] error in production (Vercel) environment.

<NuxtImg width="300" src="nuxtImage.png" />

This works in both local dev and production (Vercel) environment.

<NuxtImg width="300" src="https://i2.100024.xyz/2024/03/08/irvlgw.webp" />

2. Using

  "dependencies": {
    "@nuxt/image": "^1.4.0",
    "nuxt": "^3.10.3",
    "vue": "^3.4.19",
    "vue-router": "^4.3.0"
  }

3. Minimal Reproduction

Source Code: https://github.com/cfdxkk/nuxt-image-vercel-ipx
Online Demo: https://nuxt-image-vercel-ipx.vercel.app/

4. Something Maybe Useful

nuxt.config.ts

export default defineNuxtConfig({
	devtools: { enabled: false },
	modules: [
		'@nuxt/image',
	],
	image: {
		provider: 'ipx',
		domains: ['i2.100024.xyz'],
		dir: 'public/'
	}
})

Vercel build command (nuxt default)

Source & Build Output in Vercel

Source

Build Output

Start with the linked minimal reproduction and its nuxt.config.ts, focusing on the IPX provider, the public/ directory, and the Vercel deployment. Compare how NuxtImg resolves nuxtImage.png locally versus in the production build. Done means the static image loads through NuxtImg on Vercel without an IPX_FILE_NOT_FOUND error.