How to use the ember-responsive-image/components/responsive-background.extend function in ember-responsive-image
To help you get started, we’ve selected a few ember-responsive-image examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
kaliber5 / ember-lazy-responsive-image / addon / components / responsive-background.js View on Github 
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;
}),ember-responsive-image
Automatically generate resized images at build-time, optimized for the responsive web, and using components to render them easily as <picture> elements.
