时间戳

首页 > 解决方案 > 在角度服务器端渲染中渲染图像

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

问题描述

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

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

缩略图数据：图像/png；base64,iVBORw0KGgoAAAANSUhEUgAAB0IAAAAPTCAYAAAAtvcoQAAAgAElEQVR4nOzde3xUB53//6FAr9qW3u+tllZbXatVV61f7Vp1dXWtWt1Vd1d33Z9u97vVr+tuV3cIgXAnKZQCQwgQoFDCpIQCAmFCQ3...

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

<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 禁止的？页面的其余部分渲染得很好，可以在这里看到

标签： angulardomangular-universalserver-side-rendering

解决方案

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

推荐阅读