IPX: File not found when using assets directory

[alex-lmt]

I'm using Nuxt 3.7.3, Nuxt image 1.0.0-rc.2

In a component, providing image from assets directory as src prop of does not render image, I see "404 IPX: File not found" error in JS console.
Same image with <img> tag works correctly.

This works:
<img src="~/assets/img/banners/front-page-banner.png" alt="Banner" />

This does not work:
<NuxtImg src="~/assets/img/banners/front-page-banner.png" alt="Banner" />

Import also does not work. This does not work:

<script lang="ts" setup>
import banner from '~/assets/img/banners/front-page-banner.png';
</script>
<template>
  <NuxtImg :src="banner" alt="Banner" />
</template>

According documentation https://image.nuxt.com/get-started/configuration#dir I've added assets directory to nuxt.config:
dir: 'assets/img'

Now image is rendered normally using it this way:
<NuxtImg src="banners/front-page-banner.png" alt="Banner" />

But only on local development server, after building and deploying it image is not rendered and same error appears in JS console.

[madebyfabian]

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)

[alex-lmt]

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

I deploy to remote server in our organization intranet using CI/CD. I'm not using vercel, I did not set provider, so assume default image processing provider is used - IPX

[madebyfabian]

@alex-lmt Alright. If you don't set the dir config and store your images in the /public folder, does it work in production? Just to confirm that IPX is generally working in your production environment.

[madebyfabian]

Ah and do you deploy with nuxt build or nuxt generate?

[alex-lmt]

@madebyfabian

If you don't set the dir config and store your images in the /public folder, does it work in production? Just to confirm that IPX is generally working in your production environment.

Yes. For example image from /public/img/image.png this way is working normally:
<NuxtImg src="/img/image.png" />

Ah and do you deploy with nuxt build or nuxt generate?

We are using nuxt build

[madebyfabian]

@alex-lmt Do you also deploy the assets/img folder?
Docs:

For ipx provider, make sure to deploy customized dir as well.

[alex-lmt]

Do you also deploy the assets/img folder?

@madebyfabian I'm relatively new in Nuxt, especially to CI/CD stuff, how to add desired directory to deploy or check whether it is being delpoyed or not?

[madebyfabian]

@alex-lmt Is there a reason you want to use the assets folder? Why not just go with the public folder?

[alex-lmt]

@madebyfabian according documentation and general advices like https://masteringnuxt.com/blog/handling-assets-in-nuxt-3, I choose assets folder as I assume image may change relatively often and I don't care of physical file name (it is ok to process it during build)

[gijsdb]

I am also experiencing this issue.

following.

[jieceng]

I am also experiencing this issue.

following.

[fabianwohlfart]

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?

[l0ggik]

Have the same issue.

Would be great to know how to fix this.

[alex-lmt]

Hey, people, issue was reported with Nuxt image version 1.0.0-rc.2, it's already 1.1.0 released. Does anyone tried is the issue still exists in newest version?

[l0ggik]

Yes i tried it with Version 1.1.0 and it doesn't work.

Could be easyly reproduced locally.

In my case i put all the images in assets/images, set provider to ipx and dir to assets/images in the config.

Def works but as soon as i try build the images are missing.

Also the bild bundle size indicate that the images are processed but the mapping seems to not be correct when build.

[blowsie]

I too have this issue

The images are in the .output/public dir

  image: {
    dir: 'public/images',
  }

But IPX throws 404 when using build, but works fine with dev

[blowsie]

It seems it only breaks when using a custom dir, even if its a subfolder of public

[l0ggik]

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

[notflip]

I'm getting this error, even when using the default /img/ folder. Hope this will be fixed soon, I removed the <nuxt-img elements for now.

[fabianwohlfart]

I am also off nuxt-image completely and using my own nuxt endpoints for img generation…

[Anil-Toxy]

I am also experiencing this issue.
any workaround ?

[steel89ita]

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.

[fedeanimation]

Same issue here, just update all with pnpm update.

[PatoGordo]

same issue in the latest version of Nuxt and Nuxt Image

[fisher60]

I also seem to have encountered the same issue in dev.

Steps to reproduce:

1. Use assets directory (assets/img in my case), images load via regular img tag
2. Install Nuxt image as per install instructions, and configure assets/img as dir, use
3. Run app, images no longer load with IPX_FILE_NOT_FOUND

[benounnas]

i'm facing the same issue, i'm trying to use the public directory or even the asset as documentation is mentioning, but nothing works, i had to create the directory /_ipx/_/images, it should be an option where we toggle using the providers or not

[jyagamino]

Hi.
While this is not a fundamental solution, when I started the server on port 3001, the images were displayed correctly. Could you please try restarting the app with the following configuration in your nuxt.config.ts?

export default defineNuxtConfig({
  // Other configurations...
  devServer: {
    port: 3001,
  }
  // Other configurations...
});

However, this may not work under certain conditions.

[ztxone]

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"

[Dino-Kupinic]

This issue only seems to happen on Windows. On MacOS NuxtImg works as it should

[ztxone]

On MacOS NuxtImg works as it should

nope. I'm on latest macOs Sonoma

[jyagamino]

If you want to run the application properly, changing the version of @nuxt/image from v1.3.0 to v1.2.0 will make the images appear.

[iamMAHAM]

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

[iamMAHAM]

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.

[Pamavoc]

Following too.

[cfdxkk]

same issue in vercel #1281

[tarreislam]

ofc it took 3 hours to find this thread.

Yeah ill just switch to v-img and lazyload

[tarreislam]

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

[davestewart]

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.

[hdwebpros]

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
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.

[RyanClementsHax]

Is anyone able to reproduce a reproduction repo? I tried to, but I was able to get it to work.

https://codesandbox.io/p/devbox/nuxt-image-1006-ipx-public-64qh3f

[francesco-buscicchio]

Is there any news?

[FdvTerje]

This issue only seems to happen on Windows. On MacOS NuxtImg works as it should

This happens on linux too.

[Yo-2]

👇In my case, this code works after running "npm run dev", but it doesn't work when using "npm run build".

// nuxt.config.js
export default defineNuxtConfig({
  image: {
    dir: 'assets/images'
})

<template>
   <NuxtImg src="/banner.jpeg" />
</template>

👇This code works after running "npm run build", but it doesn't work when using "npm run dev".

<script setup>
import banner from "~/assets/images/banner.jpeg"
</script>
<template>
  <NuxtImg :src="banner" />
</template>

[FdvTerje]

I saw that the 500 error i got with these had this error:
"message": "[500] [IPX_ERROR] \nSomething went wrong installing the "sharp" module\n\nModule did not self-register: '/var/www/html/myproject/node_modules/sharp/build/Release/sharp-linux-x64.node'.

ChatGPT recommended me to delete node_modules and do this:

npm install --platform=linux --arch=x64 --ignore-scripts=false --foreground-scripts --verbose sharp

So far I have not gotten the same error again, but not sure if this is a correct fix