angular4 的动态style之background-image

向右看齐 2022-05-24 00:44 124阅读 0赞

### 参考angualr4之[background-image的问题][background-image] ###

### Style binding ###

You can set inline styles with a style binding.

Style binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix `style`, followed by a dot (`.`) and the name of a CSS style property: `[style.style-property]`.

src/app/app.component.html

content_copy<button [style.color]="isSpecial ? 'red': 'green'">Red</button> <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

Some style binding styles have a unit extension. The following example conditionally sets the font size in “em” and “%” units .

src/app/app.component.html

content_copy<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button> <button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

While this is a fine way to set a single style, the [NgStyle directive][] is generally preferred when setting several inline styles at the same time.

官方的文档很清楚，利用\[style.styleAtribute\] = "styleAtributeVar"

在项目中碰到一个问题，想到哪个台改变background-image，并且从后端获取的image的url是base64位的，怎么展示呢？

开始利用<div \[style.background-image\]="bgpictrue">，在ts文件中

this.bgpictrue= \`url(data:image/jpeg;base64,$\{event.message.picture\})\`

”但是报错了 sanitizing unsafe style value SafeValue must use \[property\]=binding: ， 才发现是Ionic2和TypeScript中对外部url资源链接做了安全限制，官网文档中对此做了解释：   
[http://http://g.co/ng/security\#xss][http_http_g.co_ng_security_xss]

下面是最后的解决方案

import \{ DomSanitizer \} from '@angular/platform-browser';

this.bgpictrue = this.sanitizer.bypassSecurityTrustStyle(\`url(data:image/jpeg;base64,$\{ event.message.picture\})\`);;

[background-image]: https://stackoverflow.com/questions/38593515/warning-sanitizing-unsafe-style-value-url
[NgStyle directive]: https://angular.io/guide/template-syntax#ngStyle
[http_http_g.co_ng_security_xss]: http://http//g.co/ng/security#xss