角度2 ngスタイルと背景画像

Question

私はAngular 2 ngStyleディレクティブに大きな問題があります。 Base64でエンコードされたファイルから背景画像を設定することはできません。 「画像」は、ファイルや自分の名前をbase64での配列の.png符号化されている

<div class="projects_item_wrap" [ngStyle]="{'background-image':'url('+images[i].file+')'}"> 

：今template.htmlに私はこれを持っています。

画像のCONSOLE.LOG [3] .FILE私は、この（私はIMGのSRC =でそれを使用するときにトラブルが画像の内側に、それは完璧に動作しない '...'）を得る：

を

アイデア？回答ありがとう！ :)

Answer 1

受信したベース64内の改行が問題の原因でした。 これは私のソリューションです：

//This goes to template <div>: 
[style.background-image]="makeTrustedImage(images[i].file)" 

//And this goes to component: 
constructor(private domSanitizer: DomSanitizer) {} 

makeTrustedImage(item) { 
    const imageString = JSON.stringify(item).replace(/\\n/g, ''); 
    const style = 'url(' + imageString + ')'; 
    return this.domSanitizer.bypassSecurityTrustStyle(style); 
    }