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

雷纳德

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

如果配置文件图像为空,我想使用管道显示一个占位符图像

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

空配置文件图像.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">
激荡者

尝试像

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

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章