Angular图片上传预览多条件优先级判断实现方案咨询

按照你要的优先级「新选本地预览图 > 数据库存储图 > 默认图」，直接在src属性里写嵌套三元即可，注意加可选链?.避免userdata未初始化时报错：

<img 
  [src]="url ? url : (userdata?.profile_path ? userdata.profile_path : defaultUserProfileUrl)" 
  alt="Profile Image" 
  class="img-fluid"
>

模板里写复杂判断不利于后期维护，建议把逻辑抽离到ts文件的getter中，代码更清晰易改：

第一步：修改ts代码 #

先修正现有代码的隐藏问题：url初始值不要设为空数组（空数组布尔值为true，会导致优先级判断出错），然后新增previewImgSrc计算属性：

// 初始值改为null
url: string | null = null;
defaultUserProfileUrl:string = 'assets/images/default_user_profile.png';
// 新增预览图计算属性
get previewImgSrc(): string {
  // 优先级1：用户刚选中的本地预览图
  if (this.url) return this.url;
  // 优先级2：数据库存储的用户头像
  if (this.userdata?.profile_path) return this.userdata.profile_path;
  // 兜底默认图
  return this.defaultUserProfileUrl;
}

onFileSelected(event) {
  console.log(event.target.files[0]);
  this.currentInput = event.target.files[0];

  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = (event) => {
      this.url = event.target?.result as string;
    };
  }
}

第二步：修改模板代码 #

直接绑定计算属性即可：

<img [src]="previewImgSrc" alt="Profile Image" class="img-fluid">

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