Nuxt 3 @nuxt/image and IPX Issue with Dynamic Pages

[krekeny-davor]

Hello,

I apologize upfront in case this has been asked before. I wasn’t able to find any related topic.

I have an issue with @nuxt/image and IPX in my Nuxt 3 project. I have a component named Pitchdeck.vue that uses NuxtImg like this:

< NuxtImg :src="images/pitchdeck/example.webp" alt="Example image" /> (Don't mind the space after <, without it, the line is not shown in the topic)

When I use this component in a static page (pitch.vue), everything works fine.

However, I need to use it in a dynamic page ([...pitch].vue), and that's where the problem arises. The images from Pitchdeck.vue are not included in the build when using yarn generate. As a result, they do not appear in the .output/public/_ipx folder.

It seems to be related to the dynamic pages and NuxtImg/IPX image generation.

Has anyone encountered this issue and found a solution?

[PrajjwalArora08]

I'm facing the same issue. I have a mix of static routes and some pages with swr: true. After running nuxt build, the static pages load images correctly, but the SSR pages don't display any images.

As an experiment, I set all pages to ssr: true, but none of the images loaded in that case either.

[PrajjwalArora08]

@krekeny-davor I found a solution that might work for you.

Initially, I was using this in my nuxt.config:

image: {
  dir: 'public/img',
}

I had my images inside a nested directory, but it seems Nuxt wasn't detecting them properly when generating dynamic pages/using SSR.

Eventually, I moved all the images directly into the public/ directory and removed the above config altogether — and the images started showing up correctly.

[krekeny-davor]

Hey @PrajjwalArora08, thanks for the comment. I’ve already tried that—unfortunately, it didn’t solve the issue in my case.

I have no image setup in the nuxt.config and my images for the Pitchdeck.vue are located in the public/images/pitchdeck.

I "load" them like this: data() { return { isLandscape: false, hasFullscreenMode: false, isFullscreen: false, isDesktop: true, mobileThreshold: 1024, slides: [ 'images/pitchdeck/Cover.webp', 'images/pitchdeck/Problem.webp', 'images/pitchdeck/Solution.webp', 'images/pitchdeck/Demo.webp', 'images/pitchdeck/Traction.webp', 'images/pitchdeck/Business Model.webp', 'images/pitchdeck/Market.webp', 'images/pitchdeck/Competition Reference.webp', 'images/pitchdeck/The formula.webp', 'images/pitchdeck/Go To Market.webp', 'images/pitchdeck/Strategy.webp', 'images/pitchdeck/Team.webp', 'images/pitchdeck/Ask.webp', 'images/pitchdeck/Reach out.webp', ], }; },