我想在我的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一切似乎工作正常…任何人都可以看到我做错了什么？
您必须将整个url语句包装在bypassSecurityTrustStyle中：
<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;
}
否则不会被视为有效的样式属性
