如何在Angular的img标签中渲染URL.createObjectURL生成的图片？

核心问题排查与修复步骤： #

• 修正img标签的绑定语法
  你当前的<img src="photo$.src" />是把字符串photo$.src直接作为src值，并非绑定组件变量。必须使用Angular的属性绑定语法：

  <img [src]="photo.src" />
  

  如果photo$是Observable类型（比如用了RxJS），则需要配合async管道处理：

  <img [src]="(photo$ | async)?.src" />
  

• 检查组件中photo$的定义
  从代码看你直接给this.photo$.src赋值，若photo$是Observable对象（比如BehaviorSubject），这种赋值方式完全错误。建议改成两种方式：

  // 方案1：用普通对象存储图片地址
  public photo = { src: '' };
  
  // 方案2：如果用RxJS Observable
  import { BehaviorSubject } from 'rxjs';
  public photo$ = new BehaviorSubject<{ src: string }>({ src: '' });
  

• 修正handleFileSelect方法的赋值逻辑
  用普通对象的话，直接更新属性即可，同时记得清理旧Blob URL避免内存泄漏：

  public handleFileSelect = (event: any) => {
    const selectedFiles = event.target.files;
    if (selectedFiles && selectedFiles.length > 0) {
      // 清理旧URL
      if (this.photo.src) {
        URL.revokeObjectURL(this.photo.src);
      }
      // 取第一个文件，如需多图可改成数组存储
      const file = selectedFiles[0];
      this.photo.src = URL.createObjectURL(file);
    }
  }
  

  用BehaviorSubject的话，要通过next方法发送新值：

  public handleFileSelect = (event: any) => {
    const selectedFiles = event.target.files;
    if (selectedFiles && selectedFiles.length > 0) {
      const currentSrc = this.photo$.value.src;
      if (currentSrc) {
        URL.revokeObjectURL(currentSrc);
      }
      const file = selectedFiles[0];
      this.photo$.next({ src: URL.createObjectURL(file) });
    }
  }
  

• 组件销毁时清理Blob URL
  为避免内存泄漏，在组件销毁时要释放所有未回收的Blob URL：

  ngOnDestroy() {
    if (this.photo.src) {
      URL.revokeObjectURL(this.photo.src);
    }
    // 若用Observable则替换为：
    // const currentSrc = this.photo$.value.src;
    // if (currentSrc) URL.revokeObjectURL(currentSrc);
  }
  

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