Images in NuxtPicture Not Loading in Conditionally Rendered Components with v-if Directive

[szarlejwojciech]

Environment

package.json:

"@nuxt/image": "^1.7.0"
"nuxt": "^3.11.2"
"vuetify": "^3.6.4"

NuxtImage configuration:

quality: 90,
format: ["avif", "webp", "jpg"],
screens: {
    xs: 320,
    sm: 600,
    md: 960,
    lg: 1280,
    xl: 1920,
    xxl: 2560,
    "2xl": 2560
},

Reproduction

Steps to Reproduce:

Create a Nuxt component that uses the v-if directive to conditionally render based on a breakpoint from useDisplay() (vuetify).
Use NuxtPicture to display images from the /public folder within this component.
Deploy the application and test in a production environment.
Observe the behavior when the condition lgAndUp is met and the component becomes visible.

Describe the bug

When the condition for the v-if directive is met and the component becomes visible, all images within the component should load correctly without any dropped candidate errors.

Additional context

The issue occurs only in the production environment.
Images are located in the /public folder.

Logs

174Failed parsing 'srcset' attribute value since its 'w' descriptor is invalid.
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-1.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-1.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-1.webp"
26Dropped srcset candidate "/_ipx/f_avif&q_90/img/test-service-image-1.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-2.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-2.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-2.webp"
26Dropped srcset candidate "/_ipx/f_avif&q_90/img/test-service-image-2.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-3.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-3.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-3.webp"
26Dropped srcset candidate "/_ipx/f_avif&q_90/img/test-service-image-3.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-4.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-4.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-4.webp"
26Dropped srcset candidate "/_ipx/f_avif&q_90/img/test-service-image-4.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-5.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-5.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-5.webp"
26Dropped srcset candidate "/_ipx/f_avif&q_90/img/test-service-image-5.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-6.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-6.webp"
Dropped srcset candidate "/_ipx/f_png&q_90/img/test-service-image-6.webp"
26Dropped srcset candidate "/_ipx/f_avif&q_90/img/test-service-image-6.webp"

[farnabaz]

This is not related to Content module. Consider creating an issue in https://github.com/nuxt/image

Providing a reproduction would help people to help you faster. You can create a reproduction using https://nuxt.new/s/v3