feat(b-img, b-img-lazy): add support for srcset and sizes props (closes #4348) (#4350)

Author: tmorehouse

src/components/image/README.md

@@ -202,6 +202,28 @@ The default `blank-color` is `transparent`.
 - The `width` and `height` props will also apply the `width` and `height` attributes to the rendered
   `<img>` tag, even if `blank` is not set.
 
+## `srcset` support
+
+`<b-img>` supports the
+[`srcset` and `sizes` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)
+on images. The props accept either a string value, or an array of strings (the array of strings will
+be converted into a single string separated by commas).
+
+For details on usage of these attributes, refer to
+[MDN's Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+guide.
+
+**Notes:**
+
+- If the `blank` prop is set, then `srcset` and `sizes` props are ignored
+- IE 11 does not support `srcset` and `sizes`, so ensure you have a value for the `src` prop
+- Vue-loader does not support project relative URLs (asset URLs) on the `srcset` attribute. Instead
+  use `require(...)` to resolve the individual URL paths. Be cautious of creating a string of data
+  URI's longer than supported by the maximum attribute value length of the browser. If your webpack
+  config has a limit for the `url-loader` and you want to prevent inline data-urls, you may have to
+  overwrite the loader limits: `require('!!url-loader?limit=0!./assets/photo.jpg')`
+- Support for `srcset` and `sizes` was added in release `2.1.0`
+
 ## Lazy loaded images
 
 > Use our complementary `<b-img-lazy>` image component (based on `<b-img>`) to lazy load images as
@@ -288,4 +310,13 @@ removed.
 To force the final image to be shown, set the `show` prop to `true`. The `show` prop supports the
 Vue `.sync` modifier, and will be updated to `true` when the final image is shown.
 
+### Lazy loaded `srcset` support
+
+`<b-img-lazy>` supports setting the [`srcset` and `sizes`](#srcset-support) attributes on the
+rendered `<img>` element. These props will only be applied to the image once it has come into view.
+
+See [`srcset` support](#srcset-support) above for prop usage details and limitations.
+
+Support for `srcset` and `sizes` was added in release `2.1.0`.
+
 <!-- Component reference added automatically from component package.json -->

src/components/image/img-lazy.js

@@ -1,4 +1,5 @@
 import Vue from '../../utils/vue'
+import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { hasIntersectionObserverSupport } from '../../utils/env'
 import { VBVisible } from '../../directives/visible/visible'
@@ -12,6 +13,14 @@ export const props = {
     default: null,
     required: true
   },
+  srcset: {
+    type: [String, Array],
+    default: null
+  },
+  sizes: {
+    type: [String, Array],
+    default: null
+  },
   alt: {
     type: String,
     default: null
@@ -109,6 +118,18 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({
     },
     computedHeight() {
       return this.isShown ? this.height : this.blankHeight || this.height
+    },
+    computedSrcset() {
+      const srcset = concat(this.srcset)
+        .filter(Boolean)
+        .join(',')
+      return !this.blankSrc || this.isShown ? srcset : null
+    },
+    computedSizes() {
+      const sizes = concat(this.sizes)
+        .filter(Boolean)
+        .join(',')
+      return !this.blankSrc || this.isShown ? sizes : null
     }
   },
   watch: {
@@ -173,6 +194,8 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({
         blank: this.computedBlank,
         width: this.computedWidth,
         height: this.computedHeight,
+        srcset: this.computedSrcset || null,
+        sizes: this.computedSizes || null,
         // Passthrough props
         alt: this.alt,
         blankColor: this.blankColor,

src/components/image/img.js

@@ -1,5 +1,6 @@
 import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { isString } from '../../utils/inspect'
 
@@ -20,6 +21,14 @@ export const props = {
     type: String,
     default: null
   },
+  srcset: {
+    type: [String, Array],
+    default: null
+  },
+  sizes: {
+    type: [String, Array],
+    default: null
+  },
   alt: {
     type: String,
     default: null
@@ -106,6 +115,12 @@ export const BImg = /*#__PURE__*/ Vue.extend({
     let height = parseInt(props.height, 10) ? parseInt(props.height, 10) : null
     let align = null
     let block = props.block
+    let srcset = concat(props.srcset)
+      .filter(Boolean)
+      .join(',')
+    let sizes = concat(props.sizes)
+      .filter(Boolean)
+      .join(',')
     if (props.blank) {
       if (!height && Boolean(width)) {
         height = width
@@ -118,6 +133,9 @@ export const BImg = /*#__PURE__*/ Vue.extend({
       }
       // Make a blank SVG image
       src = makeBlankImgSrc(width, height, props.blankColor || 'transparent')
+      // Disable srcset and sizes
+      srcset = null
+      sizes = null
     }
     if (props.left) {
       align = 'float-left'
@@ -134,7 +152,9 @@ export const BImg = /*#__PURE__*/ Vue.extend({
           src: src,
           alt: props.alt,
           width: width ? String(width) : null,
-          height: height ? String(height) : null
+          height: height ? String(height) : null,
+          srcset: srcset || null,
+          sizes: sizes || null
         },
         class: {
           'img-thumbnail': props.thumbnail,

src/components/image/package.json

@@ -55,6 +55,16 @@
           {
             "prop": "right",
             "description": "Floats the image to the right when set"
+          },
+          {
+            "prop": "srcset",
+            "version": "2.1.0",
+            "description": "One or more strings separated by commas (or an array of strings), indicating possible image sources for the user agent to use"
+          },
+          {
+            "prop": "sizes",
+            "version": "2.1.0",
+            "description": "One or more strings separated by commas (or an array of strings), indicating a set of source sizes. Optionally used in combination with the srcset prop"
           }
         ]
       },
@@ -124,6 +134,16 @@
           {
             "prop": "right",
             "description": "Floats the image to the right when set"
+          },
+          {
+            "prop": "srcset",
+            "version": "2.1.0",
+            "description": "One or more strings separated by commas (or an array of strings), indicating possible image sources for the user agent to use"
+          },
+          {
+            "prop": "sizes",
+            "version": "2.1.0",
+            "description": "One or more strings separated by commas (or an array of strings), indicating a set of source sizes. Optionally used in combination with the srcset prop"
           }
         ]
       }