typescript – Angular2 – 警告：消除不安全的风格值url(SafeVa

我想在我的Angular 2应用程序的组件模板中设置DIV的背景图像.但是,我在控制台中收到以下警告,我没有得到所需的效果…我不确定动态CSS背景图像是否被阻止,因为Angular2中的安全限制,或者我的HTML模板是坏的.

这是我在控制台中看到的警告(我已将我的img url更改为/img/path/is/correct.png：

WARNING: sanitizing unsafe style value url(SafeValue must use [property]=binding: /img/path/is/correct.png (see http://g.co/ng/security#xss)) (see http://g.co/ng/security#xss).

事情是我使用Angular2中的DomSanitizationService来清理注入到我的模板中的内容.这是我在我的模板中的HTML：

<div>
    <div>
        <div class="header"
             *ngIf="image"
             [style.background-image]="'url(' + image + ')'">
        </div>

        <div class="zone">
            <div>
                <div>
                    <h1 [innerHTML]="header"></h1>
                </div>
                <div class="zone__content">
                    <p
                       *ngFor="let contentSegment of content"
                       [innerHTML]="contentSegment"></p>
                </div>
            </div>
        </div>
    </div>
</div>

这是组件…

Import {
    DomSanitizationService,SafeHtml,SafeUrl,SafeStyle
} from '@angular/platform-browser';

@Component({
               selector: 'example',templateUrl: 'src/content/example.component.html'
           })
export class CardComponent implements OnChanges {

    public header:SafeHtml;
    public content:SafeHtml[];
    public image:SafeStyle;
    public isActive:boolean;
    public isExtended:boolean;

    constructor(private sanitization:DomSanitizationService) {
    }

    ngOnChanges():void {
        map(this.element,this);

        function map(element:Card,instance:CardComponent):void {
            if (element) {
                instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header);

                instance.content = _.map(instance.element.content,(input:string):SafeHtml => {
                    return instance.sanitization.bypassSecurityTrustHtml(input);
                });

                if (element.image) {
                    /* Here is the problem... I have also used bypassSecurityTrustUrl */ 
                    instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image);
                } else {
                    instance.image = null;
                }

            }
        }
    }
}

请注意,当我刚刚使用[src] =“image”绑定到模板时,例如：

<div *ngIf="image">
    <img [src]="image">
</div>

并且图像被传递使用bypassSecurityTrustUrl一切似乎工作正常…任何人都可以看到我做错了什么？

<div class="header"
             *ngIf="image"
             [style.background-image]="image">
</div>

if (element.image) {             
  instance.image = 
           instance.sanitization.bypassSecurityTrustStyle('url(' + element.image + ')');
} else {
  instance.image = null;
}