Question

当我制作动态背景图片时，我接受此错误（SafeValue必须使用[property] = binding：assets / img / termometre.png（请参阅http://g.co/ng/security#xss)Change）

ts code;

  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;
      });  
  }

ionic 2 background-image url Sanitizing Unsafe

2 个答案: