Skip to content
Permalink
Browse files

feat(b-img, b-img-lazy): add support for `srcset` and `sizes` props (c…

…loses #4348) (#4350)
  • Loading branch information
tmorehouse committed Nov 8, 2019
1 parent f7087f0 commit f419cb4b63611adbc0e955a81dc9c9b1df4ed7bf
@@ -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"
}
]
}

0 comments on commit f419cb4

Please sign in to comment.
You can’t perform that action at this time.