Load properly sized images in an Angular app using the Angular CDK BreakpointObserver to change image sources on breakpoint changes.
MIT License
Load properly sized images in an Angular app using the Angular CDK BreakpointObserver to change image sources on breakpoint changes.
npm install --save ngx-responsive-image@latest @angular/cdk@latest
Import the NgxResponsiveImageModule and the Angular CDK ObserversModule to app.module.ts.
import { ObserversModule } from '@angular/cdk/observers';
import {
DEFAULT_BREAKPOINTS,
DEFAULT_WIDTHS,
NgxResponsiveImageModule
} from 'ngx-responsive-image';
@NgModule({
declarations: [AppComponent],
imports: [
ObserversModule,
NgxResponsiveImageModule.forRoot(DEFAULT_BREAKPOINTS, DEFAULT_WIDTHS)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
First if the image is on a component in a vhild module import NgxResponsiveImageModule into the module (without calling forRoot()).
Add the responsiveImage directive to the img
<img responsiveImage />
If you want a placeholder/default image, which is recommened if you are using Universal set the src atributes to the placeholder url.
<img responsiveImage src="assets/images/placeholder.jpg" />
Set the imgSrc attribute to the CDN url of the image replace the static width value with :width
<img
responsiveImage
src="assets/images/placeholder.jpg"
imgSrc="http://imageflare/image1/:width"
/>
If you a binding to a component property in that case remember to use [imgSrc]
You can set custom breakpoints when call NgxResponsiveImageModule.forRoot() be sure to supply the correpsonding image widths to be used in the same order as the breakpoints.
@NgModule({
declarations: [AppComponent],
imports: [
NgxResponsiveImageModule.forRoot(
[Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape],
[600, 960]
)
],
providers: [],
bootstrap: [AppComponent]
})
Set the manual attribute to true on the image(s) and use the breakpointUp event.
<img
imgSrc="http://localhost:4000/cdn/banner/:width"
src="assets/images/placeholder.jpg"
responsiveImage
[manual]="true"
alt="test manual image"
(breakpointUp)="updateImage($event, img)"
mat-card-image
#img
/>
updateImage(event: BreakpointChangeEvent, img: HTMLImageElement) {
this.renderer2.setAttribute(
img,
'src',
event.imgSrc.replace(':width', event.width.toString())
);
}