Module doesn't work with nuxt layer images

[dimaTarhan]

Hi there. Thanks for cool module.
I use "nuxt-layers" with images in public folder. Also, I use default config for "nuxt-image" module for my test.
Everything is good with main project images, they loaded correct.

As for images from layer, there are problems. I think, this images don't include in build process in time...

Could you give me some recommendations about that?

[oemer-aran]

I have the same issue. Images in the/public folder of a nuxt layer will cause 404 error for any images you want to load with nuxt-img.

Layer setup

• Let's say layer-2 extends layer-1:

// ./layer-2/nuxt.config.ts
export default defineNuxtConfig({
  extends: ["../layer-1"],
})

• layer-1 has a /public/image.png.

Problems statement

Using nuxt-img :

<!-- response will be 404 -->
<nuxt-img src="/image.png"/>

Using plain html:

<!-- response is 200 -->
<img src="/image.png"/>

Basically @nuxt/image should account for images from other layers.

[oemer-aran]

I fixed it by adding this to the base layer / layer-1:

// ./layer-1/nuxt.config.ts
import { createResolver } from "@nuxt/kit"
const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  image: {
    dir: resolve("./public"),
  },
})

// ./layer-2/nuxt.config.ts
export default defineNuxtConfig({
  extends: ["../layer-1"],
})

But this approach will make the /public folder in the current layer not work then (layer-2/public).

[darthf1]

@danielroe apologies for pinging you; is there something we can do to fix this? So moving /public to layers does not work for the nuxt-image component, but works for the regular <img> tag. If you can give some pointers I can try a PR.

[danielroe]

@darthf1 Here would be my debugging steps:

1. identify it is in dev or build mode or both
2. check what IPX is doing - is it performing a network request to get the image, or getting it from the FS directly?
3. see what path it's trying to resolve if it's from the FS, or try the network request yourself, manually
4. fix the bug

[Aareksio]

Attaching reproduction:
https://stackblitz.com/edit/nuxt-image-ph6pdk

Edit: After reading the code and confirming, the issue only affects dev server. In production layers work as expected.

[Baroshem]

Closing as the issue only affects dev environment.

[Aareksio]

I do not recall exactly how, but the issue has been fixed. Or at least does not seem to reproduce using the link above with latest nuxt/image.

@Baroshem When has the policy changed to "DX can be broken, we care only about production"? Nuxt approach, if anything, usually seems the complete opposite. Not that I oppose, but your closing comment seems a bit odd.

[Baroshem]

It wasnt. We still care about DX a lot.

I was just going through the old issues in the repo to help clean it and make it easier to work with.

I should probably add more descriptive comment than that but after doing that for the X other issues I was lacking creativity :)