Angular 2 ngStyle和background-image

Question

Angular 2 ngStyle指令有一個很大的麻煩。我無法從base64編碼文件設置背景圖像。現在template.html我有這樣的：

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

其中「圖像」是編碼的.png文件和他們的名字的base64的數組。

圖像CONSOLE.LOG [3] .file給我這個（不麻煩的圖像裏面，它完美的作品時，我用它在IMG SRC = '...'）：

有什麼建議嗎？非常感謝您的回答！ :)

Answer 1

接收到的base64映像中的linebreak是一個麻煩的原因。 這是我的解決方案：

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