angular img

<img src="assets/images/example.jpg" alt="Example Image">

// 在组件类中定义图像路径
export class MyComponent {
  imageUrl = 'assets/images/dynamic-image.jpg';
}

<!-- 在模板中使用绑定语法 -->
<img [src]="imageUrl" alt="Dynamic Image">

<img [src]="imageUrl" (error)="handleImageError($event)" alt="Dynamic Image">

handleImageError(event: any) {
  console.error('Image failed to load', event);
  // 可以在这里设置一个默认图像或者进行其他错误处理
  this.imageUrl = 'assets/images/default-image.jpg';
}

npm install ngx-lazy-load-images --save

import { LazyLoadImageModule } from 'ngx-lazy-load-images';

@NgModule({
  imports: [
    // ...其他模块
    LazyLoadImageModule
  ],
  // ...其他配置
})
export class AppModule { }

<img [defaultImage]="defaultImage" [lazyLoad]="imageUrl" alt="Lazy Loaded Image">