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.