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

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

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

还尝试将消毒移动到自定义管道，结果相同

尝试以下解决方案时，会完全忽略

style.background image

：

[style.background image]=“'url（'+photo+'）””

[ngStyle]=“{'background-image'：'url（'+photo+'）”}”

为什么?

---

Angular:5.2.4

如果图像url中有空格，并且传递给css url（）的字符串没有引号，则会出现问题：

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

顺便说一句，如果这仍然不起作用，请尝试输入值：

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

---

如果图像url中有空格，并且传递给css url（）的字符串没有引号，则会出现问题：

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

顺便说一句，如果这仍然不起作用，请尝试输入值：

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

---

好的，我通过删除picture name（picture（1.jpg>>picture（1.jpg））中的空格解决了这个问题。仍然很好奇为什么图像url中的空格会破坏ng绑定。我通过删除图片名称（picture（1）.jpg>>picture（1）.jpg）中的空格成功地解决了这个问题。仍然好奇为什么图像url中的空格会破坏ng绑定。

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