Angular应用WebSocket图片流仅窗口调整后显示问题求助

针对你遇到的WebSocket推送Base64图片后，img标签src已更新但页面不渲染、仅窗口调整时才显示的问题，提供以下几种可行方案：

方案一：确保变更检测上下文正确执行 #

原生WebSocket的回调运行在Angular变更检测区之外，即使你尝试过NgZone，可能是包裹位置有误。修改服务代码，将数据推送操作包裹在NgZone.run中，确保Angular能感知到数据变化：

import { Injectable, NgZone } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CameraWebsocketService {
  imageData: Subject<string> = new Subject<string>();
  conn;

  constructor(private ngZone: NgZone) {} // 注入NgZone

  openSocket() {
    this.conn = new WebSocket('ws://192.168.5.100:8201/feed');

    this.conn.onopen = (event) => {
      console.log('Opened live feed socket');
    };

    this.conn.onmessage = (event) => {
      // 在Angular变更检测上下文内发送新数据
      this.ngZone.run(() => {
        this.imageData.next('data:image/jpg;base64,' + event.data);
      });
    };
  }
}

方案二：强制触发图片重绘 #

浏览器可能因缓存或重绘机制限制，即使src更新也不刷新图片。通过给img添加唯一标识（如时间戳），强制Angular重新渲染该元素：

组件代码 #

import { Component, OnInit } from '@angular/core';
import { CameraWebsocketService } from './camera-websocket.service';

@Component({
  selector: 'app-camera-view',
  templateUrl: './camera-view.component.html',
})
export class CameraViewComponent implements OnInit {
  apple = this.ws.imageData;
  imageKey = Date.now();

  constructor(private ws: CameraWebsocketService) {}

  ngOnInit(): void {
    this.ws.openSocket();
    // 每次收到新图片时更新唯一标识
    this.apple.subscribe(() => {
      this.imageKey = Date.now();
    });
  }
}

模板代码 #

<img [src]="apple | async" [attr.data-key]="imageKey" alt="摄像头流" />

方案三：验证Base64数据有效性 #

检查后端发送的Base64字符串是否存在格式问题（如多余换行、空格），可以在onmessage回调中打印event.data，复制到在线Base64转图片工具验证是否能正常解析。如果数据格式错误，即使src更新，浏览器也无法渲染图片。

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