Picture slots aren't working, throwing a message instead

[cezarmaftei]

Using slots as described here -> https://vuedose.tips/use-responsive-images-with-v-lazy-image#picture throws this message:

(...args) => {
// If a user calls a compiled slot inside a template expression (#1745), it
// can mess up block tracking, so by default we disable block tracking and
// force bail out when invoking a compiled slot (indicated by the ._d flag).
// This isn't necessary if rendering a compiled <slot>, so we flip the
// ._d flag off when invoking the wrapped fn inside renderSlot.
if (renderFnWithContext._d) {
setBlockTracking(-1);
}
const prevInstance = setCurrentRenderingInstance(ctx);
const res = fn(...args);
setCurrentRenderingInstance(prevInstance);
if (renderFnWithContext._d) {
setBlockTracking(1);
}
if (true) {
devtoolsComponentUpdated(ctx);
}
return res;
}

[alexjoverm]

Can you please provide a repro demo? You don't see any error in the picture demo

[cezarmaftei]

Hi Alex,

Thanks for your reply!

I am trying to use the slots to add the .webp versions alongside .jpg. In the examples that you posted on Codesandbox the <v-lazy-image> component doesn't have a <source> child.

My component code is:

<v-lazy-image :srcset="fallbackImage" alt="Fallback" use-picture>
	<source :srcset="webpSrcset" type="image/webp" />
	<source :srcset="defaultSrcset" type="image/jpg" />
</v-lazy-image>

It renders to:

<v-lazy-image srcset="/assets/img/img-work-logitech.7884a3fd.jpg" alt="Fallback" use-picture="" data-v-63176a20="">
	<source srcset="/assets/img/img-work-logitech-w540.91a92fc9.webp w540,/assets/img/img-work-logitech-w720.8b21771b.webp w720,/assets/img/img-work-logitech-w960.6fa265fe.webp w960" type="image/jpg" data-v-63176a20="">
	<source srcset="/assets/img/img-work-logitech-w540.63b57a2a.jpg w540,/assets/img/img-work-logitech-w720.1befa77f.jpg w720,/assets/img/img-work-logitech-w960.305253f6.jpg w960" type="image/webp" data-v-63176a20="">
</v-lazy-image>

You can see the result in the main banner here -> https://unruffled-jones-e461c4.netlify.app/ On localhost the error is the one I mentioned in my first message.

The component source code is located here.

Thanks,
Cezar

[alexjoverm]

I navigated to your site but I see no errors in the console... Additionally, it'd make it much easier to find out if you're able to provide an isolated reproduction demo. You can fork any of the codesandbox demos and make the error appear.

[cezarmaftei]

You're right, an isolated reproduction is the best way. Here you go: https://codesandbox.io/s/v-lazy-image-use-picture-wde61?file=/src/App.vue

[AdamSGit]

I can confirm that I have this issue as well. To reproduce, simply use demo code with picture slot.

Project setup :

• vue@3.2.26
• vite@2.9.9
• v-lazy-image@2.1.1
• Dev env ran with npm run dev
• Vue devtools installed and running

[semvgelooven]

I created a pull request to fix this issue, the solution was to use slots.default() instead of slots.default. You can check my fork: https://github.com/semvgelooven/v-lazy-image