离子 2 背景图像网址 消毒不安全

Question

当我制作动态背景图像时，我收到此错误(SafeValue必须使用[属性]=绑定：assets/img/termometre.png(请参阅 http://g.co/ng/security#xss(更改(

TS代码;

this.veriler.push({elementname: veri.element_list["'element_name_'" + (i)],elementid: veri.element_list['element_id_' + (i)], gorunum: this._sanitizer.bypassSecurityTrustStyle('assets/img/'+val+'.png')}); 

HTML代码;

<button ion-fab style="float:left;width: 50px;height: 50px;"  [ngStyle]="{'background-image':'url(' + ver.gorunum + ')'}">Change</button>

Answer 1

试试这个-

.HTML：

<button ion-fab class="ion-fab" [style.background-image]="getBackground(ver.gorunum)">Change</button>

TS：

getBackground (image) {
return this._sanitizer.bypassSecurityTrustStyle(`url(assets/img/${image}.png)`);
}

.CSS：

.ion-fab {
float:left;
width: 50px;
height: 50px;  
background-size: 100% 100%;
}

Answer 2

html 代码;

<ion-content padding>
<div class="elementlerlistesi" style="" >
<div><p style="float:left;margin-left:28%;font-weight:bold;font-size:20px">Elementler</p> 
<button class="gondergetler" (click)="elementolusturpage()"  >Element Ekle</button></div>
<ion-list>
<ion-item *ngFor="let ver of veriler">
<div class="elementmedium" style="margin-left:10%;">
<div class="elementler" ><p style="float:left;margin-left:5%;margin-top:15px;color:black;font-weight: bold">{{ver.elementname}} </p></div>
<ion-fab style="margin-left: 20px" >
<button ion-fab style="float:left;width: 50px;height: 50px; background-size: 100% 100%"  [ngStyle]="{'background-image':'url(' + ver.gorunum + ')'}">Change</button>
<ion-fab-list side="left">
<button  class="fabbuton" style="background-image: url('assets/img/termometre.png');background-size: 100% 100%" (click)="elementgorunum(termometreid,'termometre')" #termometreid id={{ver.elementid}}></button>
<button class="fabbuton"  style="background-image: url('assets/img/lamba.png');background-size: 100% 100%" (click)="elementgorunum(lambaid,'lamba')" #lambaid id={{ver.elementid}}></button>
</ion-fab-list>
</ion-fab>
</div>
</ion-item>
</ion-list>   
</div>
</ion-content>

TS 代码

kanalgetler()
{
var veri,deneme;
var headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json' );  
//headers.append('Authorization' , 'Basic '+ btoa(tok));
let options = new RequestOptions({ headers: headers });
let postParams = {
token: "381f13d7056-ce5fe474919",
user_id: "71",
channel: "136"
}

var veris="channel_name_";
this.http.post("https://iothook.com/api/v1.0/channel/elements/", postParams, options)
.subscribe(data => {
veri = data['_body'];
console.log(veri);       
veri= veri.slice(1, -1);
veri = veri.replace(/\/g, "");
veri = JSON.parse(veri);
for(var i = 0 ;;i++)
{
if(!veri.element_list['element_name_' + (i)])
break;   
console.log(i);
this.storage.get(veri.element_list['element_id_' + (i)]).then(val =>{ console.log(val) ;
this.veriler.push({elementname: veri.element_list['element_name_' + (i)],elementid: veri.element_list['element_id_' + (i)], gorunum: this._sanitizer.bypassSecurityTrustStyle('assets/img/'+val+'.png')}); 
});

}
}, error => {
console.log(error);// Error getting the data
deneme=error;
});  
}