Create Responsive Image Tags For All Devices

Install & Download:

# NPM
$ npm install vue-responsive-image --save

Description:

Vue Responsive Image is a Vue component that allows you to quickly insert responsive image tags in your Vue project, provided you have some automated system that produces the various sizes of images required.

The component calculates all source sizes and, depending on the parameters passed, generates the appropriate <img> tag and its srcset attribute and, if needed, separate <source> tags for tablet portrait and smartphone views.

Basic usage:

<vue-responsive-image
  :image-url="'1.jpg'"
  :image-ratio="16/9"
></vue-responsive-image>

Available props:

imageUrl: {
  type: String,
  required: true
},
showErrorImage: {
  type: Boolean,
  default: false
},
// the image to show in case of loading error, optional
errorImageUrl: {
  type: String,
  required: false,
  default: ''
},
mode: {
  type: String,
  default: 'all',
  validator: function (value) {
    // The value must match one of these strings -  tablet means tablet portrait, tablet landscape uses desktop sizes
    return ['all', 'tablet', 'smartphone', 'mobile'].indexOf(value) !== -1
  }
},
// percentage of screen occupied by image, in numbers, defaults to 100
widthOnScreen: {
  type: Number,
  default: 100
},
// percentage of screen occupied by image on tablet portrait, in numbers, if not set it uses witdhOnScreen
widthOnScreenTablet: {
  type: Number,
  default: undefined
},
// percentage of screen occupied by image on smartphone, in numbers, if not set it uses witdhOnScreen
widthOnScreenSmartphone: {
  type: Number,
  default: undefined
},
// ratio of height respective to width, defaults to 16/9
imageRatio: {
  type: Number,
  default: 16 / 9
},
alt: {
  type: String,
  default: ''
},
imageClass: {
  type: String,
  default: ''
},
// the maximum width to consider for the image, if it is not possible to generate an image wider
// than a specific width
maxWidth: {
  type: Number,
  default: 1920
},
// whether to trigger lazy loading or not
lazyLoading: {
  type: Boolean,
  default: false
}