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

[cfdxkk]

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

[Jdu278]

Having similar issues but receiving Error: [403] IPX_FORBIDDEN_PATH when running nuxi generate.

[cfdxkk]

Other developers report same issue here #1006

[Aira-Sakuranomiya]

Same when deployed on Zeabur.

[KnoerleMan]

Any new insights on this issue?
I am having the same issue on netlify.

Using nuxt generate instead of nuxt build "fixes" the problem.
Anyway this does not seem like a solution.

[haidertm]

Have anyone found any solution to this?
Facing similar issue, images already in public/images directory.

but not sure why vercel looking for images in static directory?

[cfdxkk]

@haidertm

Have anyone found any solution to this? Facing similar issue, images already in public/images directory.

but not sure why vercel looking for images in static directory?

I gaved up, it still bug but try another inelegant way to fix.
now i use a mixing mode:

• For Cloudflare Image (Internet Images) both in localhost and Vercel - Use a Custom Provider
• For static images in localhost - Use ipx
• For static images in Vercel - Use Image Optimization with Vercel

---

If I am sure that image must is a internet image, I will use a Custom Provider like this.
Specifically, it splices a URL and requests a resized image, so that the image processing task will be completed by a third-party provider.

<NuxtImg provider="yourProvider" src="https://cloudflare.com/foo.jpg" />

If i am sure a image use static file. I will NOT set the provider attribute.
No provider means automatic provider. So the provider will be ipx in my localhost environmentand Vercel Image Optimization in Vercel production environment.

<NuxtImg src="static/bar.jpg" />

If i don't know a image is internet or static, I will use v-if / v-else and a Computed Properties.

<script lang="ts">
  const imageUrl = ref<string>('static/baz.jpg') // This URL maybe change into a Internet image.
  const isStaticImage = computed(() => imageUrl.value.startsWith('static/'))
</script>

<template>
  <NuxtImg v-if="isStaticImage" :src="imageUrl" />
  <NuxtImg v-else provider="yourProvider" :src="imageUrl" />
</template>