我创建了一个返回用户配置文件的角度应用程序。这些个人资料有时具有个人资料图片，有时没有
如果配置文件图像为空，我想使用管道显示一个占位符图像
我想将用户图像发送到管道，并检查它是否为空，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] 删除。
我来说两句