Angular 5：变量解析完成前渲染空白图片src的实现方法

你遇到的这个问题其实是Angular插值语法的特性导致的：当使用{{user?.UserGuid}}时，即便user还没解析完成或者为null/undefined，插值部分会被转换成空字符串，最终就会拼接出/somepath/.png这种无效路径。下面给你几个比原始三目运算符更优的方案：

1. 用模板字符串优化属性绑定写法 #

你提到的三目运算符确实能解决问题，但复杂场景下拼接容易出错，换成ES6的模板字符串会让代码可读性高很多：

<img [src]="user ? `/somepath/${user.UserGuid}.png` : ''" />

模板字符串用反引号包裹，变量直接用${}插入，路径结构一目了然，再也不用担心漏写加号或者引号配对错误。

2. 自定义管道（最适合复用场景） #

如果你的项目里很多地方都需要渲染用户图片，那自定义管道绝对是最优雅的方案，后期维护也方便：

首先创建一个管道文件user-image.pipe.ts：

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

@Pipe({
  name: 'userImage'
})
export class UserImagePipe implements PipeTransform {
  transform(user: any): string {
    // 这里可以统一处理路径规则，比如后期改路径只需要改这里
    return user?.UserGuid ? `/somepath/${user.UserGuid}.png` : '';
  }
}

别忘了在对应的模块里声明这个管道，然后在模板里直接用：

<img [src]="user | userImage" />

这样不管多少个页面需要渲染用户头像，只需要用这个管道就好，逻辑统一集中，修改起来也省心。

3. 逻辑与运算符简化写法 #

如果只是简单场景，不想写管道，也可以用逻辑与&&来简化：

<img [src]="user?.UserGuid && `/somepath/${user.UserGuid}.png`" />

这个写法利用了JavaScript逻辑与的特性：如果user?.UserGuid存在（非空），就返回后面的模板字符串；如果不存在，就返回null/undefined，而Angular处理属性绑定时，会把null/undefined的src视为空，不会渲染出无效路径。

额外提醒：为什么插值语法不行？ #

插值语法{{}}会把所有空值（null/undefined）转换成空字符串，所以哪怕user?.UserGuid不存在，也会拼接出/somepath/.png；而属性绑定[src]会保留null/undefined，此时浏览器不会去请求这个无效资源，也不会显示破碎的图片图标（不同浏览器表现略有差异，但至少不会产生无效请求）。

总结下来，复杂场景优先用自定义管道，简单场景用模板字符串或者逻辑与的写法都能解决问题，比原始的字符串拼接更靠谱。

内容的提问来源于stack exchange，提问作者tic