使用带有条件表达式的 ngStyle 清理背景图像的不安全样式值答案

【问题标题】：Sanitizing unsafe style value for background-image using ngStyle with conditional expression使用带有条件表达式的 ngStyle 清理背景图像的不安全样式值
【发布时间】：2020-12-17 23:07:01
【问题描述】：

我正在尝试使用 ngStyle 动态显示 div 的背景图像。如果默认值为 null，我也有备用图像。

    <div class="card-img-top" 
    [ngStyle]="{'background-image': process.thumbnail != null ? 'url(data:image/png;base64,' + 
    process.thumbnail +')' : 'url(./assets/default-thumbnail.png)' | safeHtml}"
    >

虽然这工作正常，但我在控制台中收到警告，如下所示所有缩略图

core.js:6462 WARNING: sanitizing unsafe URL value data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAQIAAABxCAYAAAA+..

使用 safePipe 清理 url 仍然会给我警告。我不确定我是否以正确的方式实施它

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(value) {
    return this.sanitizer.bypassSecurityTrustStyle(value);
  }}

【问题讨论】：

标签： css angular typescript background-image html-sanitizing

【解决方案1】：

用 [style.background-image] 替换 [ngStyle] 对我有用。不需要对样式进行消毒。

<div class="card-img-top" 
[style.background-image]="process.thumbnail != null ? 'url(data:image/png;base64,' + 
process.thumbnail +')' : 'url(./assets/default-thumbnail.png)'" >

【讨论】：

这也解决了 Angular 10 中引入的一个问题，其中 ;在base64之前和数据url中的image/png之后被ngStyle删除。