Sanitizing background image url in Angular
source link: https://dev.to/ayyash/sanitizing-background-image-url-in-angular-5c58
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Sanitizing background image url in Angular
According to Angular documentation, you need to sanitize urls before you use them, one way mentioned is bypassSecurityTrustStyle
, but they don't tell you how to use it. This is how:
this.bgstyle = this.sanitizer.bypassSecurityTrustStyle(`url("${imageUrl}")`);
Enter fullscreen mode
Exit fullscreen mode
Sanitize the style value, including "url". And in HTML template:
<div [style.background-image]="bgStyle" ></div>
Enter fullscreen mode
Exit fullscreen mode
Resource: Angular Docs
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK