search

nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
https://content.nuxt.com
MIT License
3k stars 605 forks source link

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

Closed szarlejwojciech closed 3 weeks ago

szarlejwojciech commented 1 month ago

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. image image

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 commented 3 weeks ago

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