在 Angular 组件中,我有一个像这样的文件及其图像:
public file : File;
如何在 HTML 模板上显示图像,如下所示:
<img [src]="file">
使用
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 供您参考。
根据MDN web docs,您可以致电
URL.createObjectURL()
。
调整@SiddAjmera的答案,我们可以这样做:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
url: string = ""
onChange(event) {
// business logic here...
this.url = URL.createObjectURL(event.target.files[0])
}
}