vue-lazyload: Unable to get srcset to work as expected

Using version 1.2.2 with Vue 2.5.15

I’m not able to get srcset to work as expected. The following output without your plugin works as expected in Chrome:

<img
  srcset="http://via.placeholder.com/180x150 180w,http://via.placeholder.com/250x150 250w,http://via.placeholder.com/350x150 350w,http://via.placeholder.com/500x150 500w"
  sizes="(min-width: 1024px) 48.828125vw,(min-width: 768px) 45.57291666666667vw,100vw">

When replacing srcset with data-srcset and adding v-lazy="'http://via.placeholder.com/180x150'" the 180x150 image is always shown. What do I oversee? Why is data-srcset not just converted to srcset when the image needs to be loaded and let the browser do the calculation (I know there would have to be a polyfill for older browsers)?

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 30 (8 by maintainers)

Most upvoted comments

This has been around for quite a while and is definitely of a reason not to use this plugin anymore… Is there anyone who got this problem solved?

Jones-S on Feb 8, 2019

You can use adapter to make data-srcset work i guess It seems that lazyload don’t change data-srcset to srcset by default

Vue.use(VueLazyload, {
  ...
  adapter: {
    loaded ({el}) {
        const srcSet = el.attributes['data-srcset'];
        if (srcSet) {
            el.setAttribute('srcSet', srcSet.value);
        }
    },
  }
});

Ra1nko on Sep 4, 2019

‘secret’ is not created because this is not how the plugin is supposed to work. I (and also @Januszpl) expected that ‘data-srcset’ was simply transformed in ‘srcset’ and let the browser pick the right image but instead the vue-lazyload tries to guess which image in ‘srcset’ list is the most appropriate and inject it into ‘src’ attribute. Al the logic is inside utils.js/getBestSelectionFromSrcset(). Unfortunately this only support width descriptor, not pixel density descriptor.

So a workaround is changing from: data-srcset="/assets/path/1.jpg, /assets/path/1@2x.jpg 2x"

to data-srcset="/assets/path/1.jpg 100w, /assets/path/1@2x.jpg 200w" as long you’re lucky enough to know image width beforehand.

seuck on Apr 29, 2018

Hi 👋 I struggled really a lot with adaptive images (srcset) in combination with this library. This thread finally helped me to understand what happens.

I think it should be explained in the readme/docs that data-srcset is not used for the native (identically named) browser function srcset & sizes. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)

@seuck figured this out in a comment above: Here https://github.com/hilongjw/vue-lazyload/blob/master/src/util.js (Function getBestSelectionFromSrcset) calculates in javascript dependent of the actual container width the best srcset. This is cool but should really be explained in the docs. sizes-attribute is not needed for this own implementation.

NicolasHofmairT23 on Aug 5, 2021

I’d look at it if you can publish a code example.

counterbeing on Jun 17, 2019

I think I have this figured out. I’m going to put in a pull request shortly.

counterbeing on May 8, 2019