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)

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

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

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

@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

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

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

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?

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

@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)

I am also experiencing this issue.

following.

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?

Have the same issue.

Would be great to know how to fix this.

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?

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.

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

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

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

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.

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

I am also experiencing this issue.
any workaround ?

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.

Same issue here, just update all with pnpm update.

same issue in the latest version of Nuxt and Nuxt Image

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

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

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.

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"

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

On MacOS NuxtImg works as it should

nope. I'm on latest macOs Sonoma

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.

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

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.

Following too.

same issue in vercel #1281

ofc it took 3 hours to find this thread.

Yeah ill just switch to v-img and lazyload

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

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.

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.

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

Is there any news?

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

This happens on linux too.

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

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

For some of the comments in here:

The assets get tree-shaken out when running build, since they're not detected as being in use at build time.

If you run generate I the URLs crawled and the IPX-rendered images are included in your /dist.

For a build for running a server I don't think they make it in normally, and so they aren't there when NuxtImage and IPX looks for them to render them on-the-fly.

This is why it works in dev, but not in a build, and does work for SSG sites.

Not really familiar with the codebase but I would think this is the reason

I can't figure out what is the reason for the if check here, if It's not dev it defaults to public folder? @Aareksio

It's for the reason I described in my previous post.

Here's my understanding, from discussions I've had with people about this:

IPX generates the images upon request when running in production. They are not pre-generated at build time. Nuxt is actually sitting there, listening for requests of images of a specific format, finds the original file, and then it generates the image in response to the request at the time the request is made. When the request is received it looks for the requested source file at the given path and tries to generate the optimized image from the source.

The assets directory is not directly copied into the production bundle when generate is run. References to the assets directory don't have any meaning when the code is run in production. Assets get bundled, minified, and repackaged , and re-referenced in the JS by Vite as part of the build process. Vite drops anything which isn't used in the original code, and a path for NuxtImage is just a string rather than a real import like a package. The public directory IS copied directly into the production bundle, and so image files in there can still be found by Nuxt and the IPX process when those paths are referenced.

You can import static assets to be versioned with Vite, but my understanding is that since IPX is never actually called to generate the images, the images/references/imports are considered "unused" and get dropped by Vite. Not ideal, but that's the explanation which I've been given.

@Smef Yeah I think you're right, from the tests I've made removing that ternary check and just using publicDirs works on both development and production. It didn't seem like broke anything else.

Also, keep in mind that those image paths can actually be from completely separate domains. The images don't even need to be on the same server, or even the same domain, and can actually be at a completely different address! IPX just checks whatever path at runtime, gets the content, and does the processing then.

From nuxt image documentation:
Image stored in the assets/ directory are not processed with Nuxt Image because those images are managed by your bundler (such as Vite or webpack).
https://image.nuxt.com/get-started/providers