Question

是否可以使用角度ssr从API调用动态渲染图像？

可用64位基本图像数据pub.thumbnail：

缩略图数据：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAB0IAAAPTCAAAAAtvcoQAAAgAElEQVR4nOzde3xUB53 // 6FAr9qW3u + tllZbXatVV61f7Vp1dXWtWt1VdQ1CWQC1QC1QC1QC1QC1QC1QC1QC1QC1QC1QC1QC1QC1Q1C ...

但是以下内容只是呈现“数据缩略图”

<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

查看生成的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) ">

Answer 2

您是否尝试过使用<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映像，它将起作用。

在角度服务器端渲染中渲染图像

2 个答案: