Nuxt integration with picture tag

[Julian Schmidt]

Describe the feature

Thanks for this great plugin!

I think it would be a great addition to be able to use the Nuxt UnLazyImage component together with a picture tag and multiple sources.

I tried it with the following code snippet, but Chrome devtools shows that both the PNG as well as the webp version is loaded:

<picture>
	<source
		type="image/webp"
		:data-srcset="imageSrcSetWebP"
		data-sizes="auto"
	/>
	<UnLazyImage
		:blurhash="blurhash"
		:data-srcset="imageSrcSetPNG"
		width="640"
  		height="320"
		auto-sizes
	/>
</picture>

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

[Johann Schopplich]

You're damn right, we need <picture> element support. As of the last version, UnLazyImage render just <img> tags.

Please test the following syntax:

<script setup lang="ts">
const exampleImgSrc = '/images/foo.jpg'
const exampleSources = [
  {
    type: 'image/webp',
    srcSet: '/images/foo.webp 1x, /images/[e-mail] 2x'
  },
  {
    type: 'image/jpeg',
    srcSet: '/images/foo.jpg 1x, /images/[e-mail] 2x'
  }
]
</script>

<template>
  <UnLazyImage
    :src="exampleImgSrc"
    :sources="exampleSources"
    blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
    auto-sizes
  />
</template>

I have updated the Nuxt docs accordingly.

[Julian Schmidt]

Sounds awesome, thank you!
I'm just having difficulties with the import UnlazyImg from 'unlazy/UnlazyImg.vue' in my component, the export seems to be missing.

Vite error : [plugin:vite:import-analysis] Missing "./UnlazyImg.vue" specifier in "unlazy" package

Is the import path maybe different in production? I tried installing "unlazy" in addition to "@unlazy/nuxt" but it did not work either.

(@unlazy/nuxt 0.8.4, nuxt 3.4.2)

[Johann Schopplich]

Nuxt modules are auto-imported. You don't have to import them.

The component is called UnLazyImage – there is a typo in your code example.

[Julian Schmidt]

Oh right, I had something else wrong and thought the import was the problem. It works great, thank you! 😊

One thing I noticed is that the width, height and alt attributes are rendered on the picture tag when defining them on the UnLazyImage component: <picture width="3255" height="4608" alt="Alt text" ><!-- ... --></picture>. Maybe those props could be mapped on the <img> tag, so that the img tag has those attributes when rendered in the browser? Anyway, great plugin, thanks again!

[Johann Schopplich]

Remark: I just saw that the line:

import UnlazyImg from 'unlazy/UnlazyImg.vue'

… was in the example provided. Sorry, my bad – this was not intentional! I have removed it from the docs. 🙂

[Johann Schopplich]

@jjjuulliiaann Good catch! Fixed in f973ab7 – now, the attributes are bound to the <img> element inside the <picture> tag. Could you please test again with v0.8.7?

[Julian Schmidt]

I get the following 500 Vite error with v0.8.7:

ERROR  [@vue/compiler-sfc] <script> and <script setup> must have the same language type.
ERROR  [@vue/compiler-sfc] <script> and <script setup> must have the same language type. (x2)

[vite-node] [plugin:vite:vue] [VITE_ERROR] (...)/node_modules/.pnpm/@unlazy+nuxt@0.8.7_fast-blurhash@1.1.2_thumbhash@0.1.1/node_modules/@unlazy/nuxt/dist/runtime/components/UnLazyImage.vue

[Johann Schopplich]

This is the weirdest error I have encountered with Nuxt components. I think this is an upstream bug, but I created a workaround for now: 7165a5a

Could you please try again with v0.8.8? Much appreciated. 🙏

[Julian Schmidt]

Works great with v0.8.8! 🥳

[Johann Schopplich]

Wuhu! 👏
Closing this now. @jjjuulliiaann thanks again for the continuous testing. If you encounter other issues, please raise an issue in this repo. It helps me to collect feedback from real-world use-cases.