Question

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

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

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

empty-profile-image.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";
    }
    }

 }

user-profile.component.ts

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

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

demo

Answer 2

将日期图像路径设置为

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

和管道功能一样返回

return contactImage || "assets/images/user.jpg";

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

2 个答案: