feat: #137 add nuxt img integration resulting in modern image and responsive sizes by default, improves performance (mobile).

[codesandbox[bot]]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders | Preview

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
alpine	✅ Ready (Inspect)	Visit Preview	Jun 24, 2023 10:13am

[Tahul]

@BillyBouman-2B-IT ;

Hey, all the images are broken on the latest deployment.

Is this expected?

Can I help in fixing this somehow?

[BillyBouman-2B-IT]

@BillyBouman-2B-IT ;

Hey, all the images are broken on the latest deployment.

Is this expected?

Can I help in fixing this somehow?

Hi!

Yes, they are.

This is not expected and I'm not sure how to resolve the issue. Please see https://github.com/nuxt-themes/alpine/issues/137#issuecomment-1557633858.

[BillyBouman-2B-IT]

@Tahul I've updated Nuxt to 3.6.0 because of https://github.com/nuxt/image/issues/638 and https://github.com/nuxt/nuxt/pull/21655 which may solve the problem of images being broken.

The deployment is failing, I do not know why, sadly that blocks me from checking the validity of this fix.

I'd appreciate your help.

[BillyBouman-2B-IT]

@Tahul I've updated Nuxt to 3.6.0 because of https://github.com/nuxt/image/issues/638 and https://github.com/nuxt/nuxt/pull/21655 which may solve the problem of images being broken.

The deployment is failing, I do not know why, sadly that blocks me from checking the validity of this fix.

I'd appreciate your help.

The latest deploy seems to have worked. What I see is that all of the URL's that reference images are being manipulated by Vercel. The HTML generated is correct (using the fetchpriorities, decoding, native lazy loading and webp with fallback to png). The differences between Vercel deploy and Netlify deploy:

Vercel

<picture fetchpriority="high">
    <source type="image/webp"
        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px"
        srcset="/_vercel/image?url=/alpine-0.webp&amp;w=320&amp;q=100 320w, /_vercel/image?url=/alpine-0.webp&amp;w=640&amp;q=100 640w, /_vercel/image?url=/alpine-0.webp&amp;w=768&amp;q=100 768w, /_vercel/image?url=/alpine-0.webp&amp;w=1024&amp;q=100 1024w, /_vercel/image?url=/alpine-0.webp&amp;w=1280&amp;q=100 1280w, /_vercel/image?url=/alpine-0.webp&amp;w=1536&amp;q=100 1536w, /_vercel/image?url=/alpine-0.webp&amp;w=1536&amp;q=100 1536w">
    <img alt="Hero Image" loading="eager" decoding="sync" onerror="this.setAttribute('data-error', 1)" class="right"
        data-nuxt-pic="" src="/_vercel/image?url=/alpine-0.webp&amp;w=1536&amp;q=100"
        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px"
        srcset="/_vercel/image?url=/alpine-0.webp&amp;w=320&amp;q=100 320w, /_vercel/image?url=/alpine-0.webp&amp;w=640&amp;q=100 640w, /_vercel/image?url=/alpine-0.webp&amp;w=768&amp;q=100 768w, /_vercel/image?url=/alpine-0.webp&amp;w=1024&amp;q=100 1024w, /_vercel/image?url=/alpine-0.webp&amp;w=1280&amp;q=100 1280w, /_vercel/image?url=/alpine-0.webp&amp;w=1536&amp;q=100 1536w, /_vercel/image?url=/alpine-0.webp&amp;w=1536&amp;q=100 1536w"
        data-error="1" width="432" height="288">
</picture>

Netlify

<picture fetchpriority="high">
    <source type="image/webp"
        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px"
        srcset="/_ipx/f_webp&amp;s_320x213/alpine-0.webp 320w, /_ipx/f_webp&amp;s_640x427/alpine-0.webp 640w, /_ipx/f_webp&amp;s_768x512/alpine-0.webp 768w, /_ipx/f_webp&amp;s_1024x683/alpine-0.webp 1024w, /_ipx/f_webp&amp;s_1280x853/alpine-0.webp 1280w, /_ipx/f_webp&amp;s_1536x1024/alpine-0.webp 1536w, /_ipx/f_webp&amp;s_1536x1024/alpine-0.webp 1536w">
    <img alt="Hero Image" loading="eager" decoding="sync" onerror="this.setAttribute('data-error', 1)" class="right"
        data-nuxt-pic="" src="/_ipx/f_png&amp;s_1536x1024/alpine-0.webp"
        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px"
        srcset="/_ipx/f_png&amp;s_320x213/alpine-0.webp 320w, /_ipx/f_png&amp;s_640x427/alpine-0.webp 640w, /_ipx/f_png&amp;s_768x512/alpine-0.webp 768w, /_ipx/f_png&amp;s_1024x683/alpine-0.webp 1024w, /_ipx/f_png&amp;s_1280x853/alpine-0.webp 1280w, /_ipx/f_png&amp;s_1536x1024/alpine-0.webp 1536w, /_ipx/f_png&amp;s_1536x1024/alpine-0.webp 1536w"
        width="432" height="288">
</picture>

Could it be a configuration in Vercel that is breaking the images?