angular lazy image loading

ngx-lazy-load-images 설치하기

npm i ngx-lazy-load-images --save

모듈 import 하기

import { NgModule } from '@angular/core';
import { LazyLoadImagesModule } from 'ngx-lazy-load-images';

@NgModule({
  imports: [
    LazyLoadImagesModule
  ]
})
export class AppComponent {}

사용하고자 하는 img에 lazy-load-images directive 사용하기

img 태그에 사용하는 것이 아니고 img의 상위 태그에 directive를 넣어야 한다.

<!-- Image tags -->
<div class="image-list" lazy-load-images>
  <img *ngFor="let imageUrl in images" [attr.data-src]="imageUrl">
</div>

<!-- Background images -->
<div class="image-list" lazy-load-images>
  <div *ngFor="let imageUrl in images" [attr.data-background-src]="imageUrl"></div>
</div>

img 에 data-src 속성 넣기

undefined

참조