angular - 如何为图像创建自定义管道？

Question

我创建了一个返回用户配置文件的角度应用程序。这些个人资料有时有个人资料图片，有时没有

如果个人资料图像为空，我想使用管道显示占位符图像

我想将用户图像发送到管道并检查它是否为空，否则将其替换为assets/images/user.jpg保留用户图像

空配置文件image.pipe.ts

 import { Pipe, PipeTransform } from '@angular/core';

 @Pipe({
 name: 'emptyProfileImage'
 })

 export class EmptyProfileImagePipe implements PipeTransform {

    transform(contactImage: string): string {
    if (contactImage == ''){
      return "assets/images/user.jpg"
    }
    else{
      return "groupMember.contactImage";
    }
    }

 }

用户配置文件.component.ts

  <img class="user-image"
   src=" user.contactImage | emptyProfileImage">

标签： angularpipe

Answer 1

尝试类似的东西

import { Pipe, PipeTransform } from '@angular/core';

 @Pipe({
 name: 'emptyProfileImage'
  })
 export class EmptyProfileImagePipe implements PipeTransform {

  transform(contactImage: string): string {
     return contactImage || yourplaceholderimagepath;
   }
 }

然后在你的 html

 <img class="user-image"
   [src]=" user.contactImage | emptyProfileImage">

请注意，它应该[src]是src

演示