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

Question

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

    <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);
  }}

Answer 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)'" >

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

Sanitizing unsafe style value for background-image using ngStyle with conditional expression

css

background-image

html-sanitizing

typescript

angular