Nuxt-img - Image urls problem

Support
1

website: https://profound-madeleine-1c69eb.netlify.app/corporations/a54441df-9946-48b5-9834-dd63d39faf99

website “Secret” Bloodtide123

Hi guys.

Im using component just like you describe it on Nuxt Image is here! And it's a game changer

<nuxt-img
        v-if="props.iconsOnly"
        :src="`/images/${$slugify(attribute.name)}.png`"
        loading="lazy"
      />

my image files are placed in /public directory but it doesn’t work :src property is generated like: /_ipx/_/images/dual-laser.png but right address should be /images/dual-laser.png

The question is how to implement it right?

As workaround I did a change in component and add ../../ to image path but well… this is not nice workaround :slight_smile:

Regards
MS

2

Hi @michal-stachura,

Could you provide a minimal reproduction as a repo please?

3

Hi @hrishikesh and sorry for delay :slightly_smiling_face:

I’ve reproduced issue with minimal app here: https://heroic-mandazi-8e8b17.netlify.app/
The repository for this app you can find here: GitHub - michal-stachura/examples-images-issue

4

Hey @michal-stachura,

Did you try using nuxt generate? Nuxt Image won’t work for server-side rendering on Netlify: Netlify | Nuxt Image

1 Like
5

It is working with right provider configuration like:

image: {
    provider: 'netlify',
    netlify: {
      baseURl: process.env.IMAGES_URL
    }
  }
3 Likes
7

Thanks for sharing this with the community @michal-stachura

1 Like
8

Hey guys,
I am facing the same issue. Unfortunately this solution won’t work anymore, because Netlify’s large media service is deprecated now. Does anyone have an idea, how to fix it?
Thx your help!

9

Netlify now has Image CDN that should be used instead of Large Media: Netlify Image CDN | Netlify Docs