將文件對象轉換為 <img> 角

Question

在Angular組件中，我有一個像這樣的文件及其圖像：

public file : File;

如何在HTML模板上顯示圖像，如下所示：

<img [src]="file"> 

Answer 1

使用FileReader's實例的readAsDataURL方法並將其傳遞給File 。 它具有onload屬性，您可以向其分配處理程序函數。 讀取輸入文件后，將使用event調用此方法。 事件的target.result屬性將具有編碼的URI，然后可以將其用作圖像源。

這就是它翻譯成代碼的方式

在您的組件類中：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  url;

  onChange(event) {
    var reader = new FileReader();

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

    reader.onerror = (event: any) => {
      console.log("File could not be read: " + event.target.error.code);
    };

    reader.readAsDataURL(event.target.files[0]);

  }

}

並在模板中：

<input type="file" (change)="onChange($event)">

<img *ngIf="url" [src]="url">

---

這是供您參考的工作樣本StackBlitz 。