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>

[JasonLandbridge]

Just my 2 cents, make sure the images aren't inside ClientOnly tags, as the NuxtImg is server-side only because it crawls the image references server side and based on that, it bundles the images during nuxt generate.

Removing ClientOnly tags fixed this same issue for me as I wrongly assumed NuxtImg can be used client side