How to use ember-responsive-image - 4 common examples

import LazyLqipMixin from 'ember-lazy-responsive-image/mixins/lazy-lqip-mixin';
import ResponsiveImageComponent from 'ember-responsive-image/components/responsive-image';

/**
 * This component extends the `ResponsiveImage`-Component in a lazy manner and supports LQIP technique
 *
 *
 * @class ResponsiveImage
 * @extends Ember.Component
 * @namespace Components
 * @public
 */
export default ResponsiveImageComponent.extend(LazyLqipMixin, {

  attributeBindings: ['lqipSrc:src'],

  init() {
    this._super(...arguments);
    if (this.get('lazy')) {
      // We have to replace the origin attribute bindings to avoid bind `src`, `srcset` and `sizes`
      let newBindings = this.get('attributeBindings')
      .filter((attr) => {
        return !['src', 'srcset', 'sizes'].includes(attr);
      })
      .concat(['srcset:data-srcset', 'sizes:data-sizes', 'src:data-src']);
      this.set('attributeBindings', newBindings);
    }
  }
});

export function initialize(/* appInstance */) {
    let meta = '__ember_responsive_image_meta__';
    ResponsiveImage.reopen({
      meta
    });
}

import { isPresent } from '@ember/utils';
import { readOnly } from '@ember/object/computed';
import LazyLqipMixin from 'ember-lazy-responsive-image/mixins/lazy-lqip-mixin';
import { htmlSafe } from '@ember/string';
import ResponsiveBackgroundComponent from 'ember-responsive-image/components/responsive-background';

/**
 * This component extends the `ResponsiveBackground`-Component in a lazy manner and supports LQIP technique
 *
 *
 * @class ResponsiveBackground
 * @extends Ember.Component
 * @namespace Components
 * @public
 */
export default ResponsiveBackgroundComponent.extend(LazyLqipMixin, {

  attributeBindings: ['data-bgset', 'data-sizes'],

  /**
   * insert the stylesheets with the background image to the consumer
   *
   * @property style
   * @type string
   * @private
   */
  style: computed('lqipSrc', function() {
    if (isPresent(this.get('lqipSrc'))) {
      return htmlSafe(`background-image: url('${this.get('lqipSrc')}');`);
    }
    return null;
  }),

import ResponsiveImageService from 'ember-responsive-image/services/responsive-image';
import { assert } from '@ember/debug';

/**
 * Service class to provides images generated by the responsive images package
 * with additional inline support
 *
 * @class ResponsiveImageService
 * @namespace Services
 * @module responsive-image
 * @public
 */
export default ResponsiveImageService.extend({

  /**
   * returns the inline image data as base64 encoded string
   *
   * @method getInlineImage
   * @param {String} imageName The origin name of the Image
   * @returns {String} the base64 encoded string
   * @public
   */
  getInlineImage(imageName) {
    assert(`There is no inline image data for image ${imageName}`, this.getLqip(imageName).hasOwnProperty('image'));
    return this.getLqip(imageName).image;
  },

  /**
   * returns whether there's an inline image for given image name