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 <NuxtImg> 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 <NuxtImg>
3. Run app, images no longer load with IPX_FILE_NOT_FOUND

[blowsie]

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

[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