@@ -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 -->

@@ -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,

@@ -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,

@@ -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"

}

]

}