How to use the ember-responsive-image/components/responsive-image.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-image.js View on Github 
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);
}
}
});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.
