在 angular 服务器端渲染中渲染图像

Question

是否可以使用 angular ssr 动态渲染来自 API 调用的图像？

Base 64 图像数据 pub.thumbnail 可用：

thumbnail data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB0IAAAPTCAYAAAAtvcoQAAAgAElEQVR4nOzde3xUB53//6FAr9qW3u+tllZbXatVV61f7Vp1dXWtWt1Vd1d33Z9u97vVr+tuV3cIgXAnKZQCQwgQoFDCpVAIFCgh3Mt1cuWeQCAhIQm ...

但下面只是渲染 "data thumbnail"

<div fxFlex="45 " *ngIf="pub.thumbnail as value ">
    <mat-card style="margin: 1em ">
        <img mat-card-image src="{{value}} " alt="data thumbnail ">
    </mat-card>
</div>

SSR 允许或禁止这样做吗？页面的其余部分呈现良好，可见 here

Answer 1

您尝试过使用 <iframe> 吗？像这样：

component.html

<iframe style="width: 620px; height: 310px;" id="my_image"></iframe>

component.ts

document.getElementById('my_image').setAttribute('src', 'data:image/png;base64, ' + value)

假设您有一个 base64 图像，这就可以了。

Answer 2

查看生成的html，是因为angular不信任你的图片数据

<img  alt="data thumbnail " src="unsafe:data:image/png;base64,iVBO.... ">

尝试使用 angular 的 DomSanitizer

constructor(private sanitizer: DomSanitizer)
{
    this.value = "data:image/png;base64....";
    this.value = this.sanitizer.bypassSecurityTrustUrl(this.value);

编辑：

您需要在模板中使用属性绑定语法 (<img [src]="value")，如生成的 html

中所示

<img  alt="data thumbnail "src="unsafe:SafeValue must use [property]=binding: 10.16907/e495cce8-59ab-4444-b12e-36b2160f6a98 (see http://g.co/ng/security#xss) ">

在 angular 服务器端渲染中渲染图像

Rendering images in angular server side rendereing

dom

server-side-rendering

angular-universal

angular