Как создать пользовательский канал для изображений?

Question

Я создал угловое приложение, которое возвращает профили пользователей. у этих профилей иногда есть изображение профиля, а иногда нет

, если изображение профиля пусто, я хочу отобразить изображение заполнителя с помощью канала

Я хочу отправить изображение пользователя в трубу и проверитьесли он пуст, замените его на assets/images/user.jpg, в противном случае сохраните изображение пользователя

empty-profile-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

демо

Answer 2

Установите путь к изображению даты как

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

И функцию конвейера, чтобы вернуть

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