为什么 sanitizer.bypassSecurityTrustStyle 在设置 [style.background-image] 属性时返回警告？

Question

我有一段简单的代码无法工作：

<div class="cover"
    [style.background-image]="sanitizer.bypassSecurityTrustStyle('url(/assets/img/picture (1).jpg)')">
</div>

返回sanitizer.bypassSecurityTrustStyle以下消息：

SafeValue must use [property]=binding: url(/assets/img/picture (1).jpg) (see http://g.co/ng/security#xss)

还尝试将消毒转移到自定义管道，结果是相同的。

当尝试以下解决方案时，Angularstyle.background-image完全忽略：

1. [style.background-image]="'url(' + photo + ')'"
2. [ngStyle]="{'background-image': 'url(' + photo + ')'}"

为什么？

角度：5.2.4

Answer 1

当图像 url 中包含空格并且传递给 css url() 的字符串不带引号时，就会出现问题：

[style.background-image]="'url(' + photo + ')'"

当您的网址没有空格时，上面的代码可以正常工作。如果有空格，只需用单引号将实际图像 url 括起来：

[style.background-image]="'url(\'' + photo + '\')'"

顺便说一句，如果这仍然不起作用，请尝试禁用 Angular对传入值的内置清理：

bypassSecurityTrustStyle(style)

您可以为此创建一个管道：

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

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(
    private sanitizer: DomSanitizer
  ) { }

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