Angular2中后端返回图片为空时如何显示默认图片？

Got it! 在Angular里实现这个"后端返回图片为null时显示默认图，否则显示目标图"的需求非常简单，给你两种实用的实现方式，你可以根据自己的业务场景选择：

方案1：使用短路求值的属性绑定（推荐） #

Angular推荐用属性绑定语法 [src] 来处理动态属性值，结合JavaScript的短路求值逻辑，一行代码就能搞定：

<ul>
  <li *ngFor="let message of activeMessages" 
      (click)="showMessage(message)" 
      [class.activeShow]="message.id == message_id">
    <span>{{message.updated_at | date:'dd.MM.yyyy'}}</span>
    <!-- 核心逻辑：如果message.image是有效真值就用它，否则用默认图 -->
    <img [src]="message.image || '../assets/images/msg.png'" alt="Message image">
  </li>
</ul>

逻辑说明：

• 当 message.image 是真值（非null、非undefined、非空字符串等）时，会直接使用后端返回的图片地址
• 如果 message.image 是null/undefined/空字符串这类假值，就会 fallback 到默认图片地址

方案2：严格判断null的三元运算符 #

如果你需要仅当image字段严格等于null时才显示默认图（比如后端可能返回空字符串但你想保留这个空值的情况），可以用三元运算符来做精确判断：

<ul>
  <li *ngFor="let message of activeMessages" 
      (click)="showMessage(message)" 
      [class.activeShow]="message.id == message_id">
    <span>{{message.updated_at | date:'dd.MM.yyyy'}}</span>
    <img [src]="message.image !== null ? message.image : '../assets/images/msg.png'" alt="Message image">
  </li>
</ul>

逻辑说明：

• 只有当 message.image 严格等于 null 时，才加载默认图片
• 如果是其他假值（比如空字符串、undefined），依然会尝试加载 message.image 的值

额外提示 #

• 记得给img标签加上alt属性，提升页面可访问性
• 如果默认图片加载失败，可以检查一下相对路径是否正确（路径是相对于当前组件HTML文件的位置哦）

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