如何在Angular中将File引用通过<img标签在HTML中展示？

嘿，这个问题我太熟悉了！要在HTML的<img>标签里展示Controller中存储的File类型图片，你需要先把File对象转换成浏览器可识别的临时URL，再绑定到img的src属性上。具体操作分两步：

1. 在Controller中生成临时Blob URL #

首先在你的组件类里新增一个属性来存储这个临时URL，然后利用URL.createObjectURL()方法把File转换成URL。同时别忘了在组件销毁时释放这个URL，避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  img: File = someFile; // 已知为图片类型的文件
  imageUrl: string | null = null;

  ngOnInit(): void {
    // 将File对象转换为浏览器可识别的临时URL
    this.imageUrl = URL.createObjectURL(this.img);
  }

  ngOnDestroy(): void {
    // 组件销毁时必须释放URL资源，防止内存泄漏
    if (this.imageUrl) {
      URL.revokeObjectURL(this.imageUrl);
    }
  }
}

2. 在HTML中绑定URL到img标签 #

直接把刚才生成的imageUrl绑定到<img>的src属性即可：

<img [src]="imageUrl" alt="展示的图片" />

补充提醒 #

• URL.createObjectURL()生成的是一个指向本地File/Blob对象的临时Blob URL，浏览器能通过这个URL直接加载图片内容。
• 一定要记得在组件销毁或者图片文件更新时调用URL.revokeObjectURL()，不然浏览器会一直占用该资源，在频繁切换图片的场景下容易引发内存问题，这个细节很容易被忽略！

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