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

问题描述

我正在尝试使用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);
  }}

解决方法

用[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)'" >