图片文件上传 angular

Question

我有图像文件上传输入和预览显示上传的图像文件。在那里我需要处理一些情况，如下所示：

如果未选择图像文件且数据库没有图像，则显示默认图像，否则显示根据图像
如果数据库有图像在预览中显示然后选择文件上传后在预览中显示上传的文件

我不知道如何在 img 标签的 src 上处理这些情况。

angularhtml代码

<div class="profile_img">
    <div class="img">
        <img [src]="url?url:defaultUserProfileUrl" alt="Profile Image" class="img-fluid">
    </div>
    <div class="form-group">
        <div class="custom-file">
            <input type="file" id="myfile" name="myfile" [formControl]="profile_image" [(ngModel)]="currentInput"
            accept='image/*' (change)="onFileSelected($event)" />
        </div>
    </div>
</div>

如果存在数据库图像，那么我将显示如下：

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

angular ts代码

  url: any = [];
  defaultUserProfileUrl:string = 'assets/images/default_user_profile.png';
  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]); // read file as data url

      reader.onload = (event) => {
        this.url = event.target.result;
      };
    }
  }

我如何处理图像 src 中的 multiple/nested if else 条件？或者还有其他解决方案吗？

请指导和帮助。提前致谢。

Answer 1

您已经定义了一个变量 defaultUserProfileUrl:string = 'assets/images/default_user_profile.png';

现在再定义一个变量为 activeImageUrl = defaultUserProfileUrl:string

并在 ngOnInit() 内部进行后端调用以检索存储在数据库中的图像（如果有）并将 activeImageUrl 替换为检索到的图像。

并且在html

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

图片文件上传 angular

image file upload in angular

if-statement

file-upload

image-upload

angular

angular-reactive-forms