image: IPX: File not found when using assets directory

How is it that everything always suck when its build in javascript

I’m having the same issue now. I reverted back to nuxt and modules to the last working version, but still not working. I even tried cleaning the node_modules, .nuxt, .output folders and yarn.lock, then running npx nuxi cleanup but still no change.

In developer console I see that the image is pointing to “http://localhost:3000/_ipx/_/icon.png” Using the default public dir.

Found a workaround: Do not use Nuxt Image, use Vuetifys v-img instead.

same issue in the latest version of Nuxt and Nuxt Image

@jyagamino the images appear in development server but not in production build

Same 404 error with /_ipx/ folder after “build” project. Couldn’t find the solution - have to rid all NuxtImg tags (

Using “@nuxt/image”: “^1.3.0”, “nuxt”: “^3.10.3”

I am also experiencing this issue.

following.

For most of you here, Id suggest you move your images to the root of the public dir and retest. That worked for me.

I am having the same issue. I tried a Stackblitz: https://stackblitz.com/edit/nuxt-starter-ee1s9x

But I can’t upload images without a paid plan.

Remote images work fine. <NuxtImg ... /> flat out refuses to work with any local image.

I’ve tried the images in the public directory as well as assets/images/.

How to reproduce: Initialize a new Nuxt project Install and load NuxtImg module

Then, follow their documentation:

---

Usage <NuxtImg> outputs a native img tag directly (without any wrapper around it). Use it like you would use the tag:

<NuxtImg src="/nuxt-icon.png" /> Will result in:

<img src="/nuxt-icon.png" /> With default provider, you should put /nuxt-icon.png inside public/ directory for Nuxt 3 make the above example work.

---

This just doesn’t work at all.

So I’ve been looking to solve similar problems in Nuxt Content Assets, and it turns out there is a way you can do this.

Nuxt Image makes any layer’s public folder accessible via the _ipx endpoint, so a hacky solution is to declare your assets folder as a layer, and point its public folder to itself:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    'assets'
  ]
})

// assets/nuxt.config.ts
export default defineNuxtConfig({
  dir: {
    public: __dirname
  }
})

I would prefer that Nuxt Image would allow an array for dir but this works in the meantime.

Unfortunately, for the time being, I’ve had to use a classic image tag. But given that our site has over a hundred images, changing them manually would be really tiring. While waiting for this bug to be fixed, I proceeded as follows after research : inside composables/use-asset.ts

export default function useAsset(path: string): string {
  const assets = import.meta.glob('~/assets/**/*', {
    eager: true,
    import: 'default',
  })

 // all my file startsWith '/' ex: /home/hero.png  you'll need to adjust
  return assets[`/assets${path}`]
}

then i create inside components/NuxtImg.vue (override @nuxt/img NuxtImg component)

<script setup lang="ts">
const props = defineProps(['src', 'width', 'height', 'alt', 'class'])
const img = (props.src.startsWith('https://')
  ?? props.src.startsWith('http://')) // link from external source
  ? props.src // use external source
  : useAsset(props.src) // resolve path
</script>

<template>
  <img
    :src="img"
    :width="props.width"
    :height="props.height"
    :alt="props.alt"
    :class="props.class"
  >
</template>

The images will not be optimized as they should be, but until the bug is fixed this may help.

I am also experiencing this issue. I am not using public folder but a media folder, because I do not want the source images in public to be copied. I run build & node .output/server/index.mjs. Starting this server locally, but also on a custom node setup, it will lead to a 404. As it not works out-of-the-box with a custom dir, it’s very contraintuitive. Maybe there is an easy solution @danielroe knows?

So this would be the correct way after you set the dir config: <NuxtImg src="banners/front-page-banner.png" alt="Banner" />

Where do you deploy? According to the docs, other directories than public don’t work with e.g. vercel.

For some providers (like vercel), using a directory other than public/ for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the public/ directory (deployment URL)