Angular 2 ngStyle和background-image

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

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

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

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

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

來源

2017-09-04 Wondergrauf

見https://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 –

如果你的意思是domSanitizer - 我已經嘗試過了 - 沒有任何改變:( – Wondergrauf

Alternative'[style.background-image] =''url（'+ images [i] .file +'）'| safeResourceUrl「'（管道使用'bypassSecurityTrustResourceUrl（值）' –

接收到的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); 
    }

來源

2017-09-07 06:50:13 Wondergrauf

Angular 2 ngStyle和background-image

回答

相關問題