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)

还尝试将清理移动到自定义管道，结果是一样的。

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

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

为什么？

Angular：5.2.4

Answer 1

如果您的图片网址中包含空格，并且传递给css url（）的字符串没有引号，则会出现此问题：

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

当你的网址没有空格时，上面的代码工作正常。如果有空格，只需用单引号包装实际图像网址：

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

顺便说一下，如果仍然无效，请尝试disabling Angular's built-in sanitization获取传入的值：

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

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

1 个答案: