<b-img-lazy> with srcset

[amoralesdesign]

not support srcset, if you add srcset value vuejs load all images without using lazyload

I tried to add it in the img-lazy.js code

export default {
  name: NAME,
  components: { BImg },
  props: {
    src: {
      type: String,
      default: null,
      required: true
    },
    srcset: {
      type: String,
      default: null,
    },

[tmorehouse]

srcset is currently not supported by <b-img-lazy>, as it would need to perform media queries to determine which image should be loaded when the image comes into view (although there may be ways around this), and would also require blank images (or placeholders) at the same dimensions as the srcset has (which are not always provided via the sizes attribute, so need to be inferred somehow, without loading the images to get their native aspect ratio).

Since b-img-lazy now uses IntersectionObserver to detect image visibility in the viewport, it also detects visibility of the CSS display (i.e. never loads the lazy image if the computed style is display: none i.e. via media queries, or Bootstrap responsive display utility classes such as d-md-none, d-lg-block etc.).

As a work around one could specify multiple <b-img-lazy> components with different responsive display values (i.e. classes), and ensure that all but one of the <b-img-lazy> components will have display: none set.

[tmorehouse]

One other thing to note is that IE 11 does not support srcset (norsizes) attribute on the <img> element, so src would always need to be set to ensure IE11 support. https://caniuse.com/#feat=srcset

The other issue to deal with is project relative asset URLs, which is easy for single image src attribute, but vue-loader may not know what to do with comma separated list of URLs in the srcset attribute/prop (https://vue-loader.vuejs.org/guide/asset-url.html#asset-url-handling)

[tmorehouse]

We might be able to get it to work, although one can only specify a single blank/placeholder image to load by default (which may or may not have the same expected aspect ratio as the final image chosen by the browser)

[tmorehouse]

BootstrapVue v2.1.0 has been released, which added support for srcset and sizes props..