Angular12 img src绑定在模板中生成data-src

Question

我正在从我的后端获取我需要在 img 标签中显示的图像（在 blob 中）。

template.html

<img class="image" [src]="selectedImage.imageStream" />

component.ts

getDocument(requestPath: string): Observable < any > {
    return this.http.get(`${Config.apiRoot.uri}${requestPath}`, {
      responseType: 'blob'
      as 'json'
    })
  }

  ** ** ** **

  getAndAssignImage() {
    this.getDocument(this.selectedImage.imageSrc).subscribe({
      next: (streamResp) => {

        const imageStreamReader = new FileReader();

        imageStreamReader.addEventListener('load', () => {
          this.selectedImage.imageStream = imageStreamReader.result;
        }, false);

        imageStreamReader.readAsDataURL(streamResp);
      }
    });
  }

不知何故，即使我绑定到 src 属性，生成的 html 在 data-src 属性中有 base64 图像：

<img _ngcontent-btp-c316="" class="image ng-star-inserted" data-src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD...">

不知何故图像没有显示，我猜这是因为在 data-src 属性中设置了 base64，而不是我正在绑定的 src 属性。

我已经检查过 base64 是有效的，copy/pasting 它在一个普通的 html 文件中，只有 img src 显示图像。

有什么问题吗？为什么 img 标签在 data-src 属性中有我的 base64 字符串而不是 src?

Answer 1

经过大量研究，我们发现了这个问题。我们正在使用 OneTrust 并且自动阻止功能阻止了图像显示。

The specifics are here and here 但我们的修复只是添加 data-ot-ignore 和 optanon-category class 以防止 OneTrust 阻止程序混淆此图像标签。所以最后的图片标签是这样的：

<img data-ot-ignore class="image optanon-category" [src]="selectedImage.imageStream" />

您可以找到解决视频播放器问题的方法here

Angular12 img src绑定在模板中生成data-src

Angular12 img src binding generates data-src in template

typescript

angular

one-trust