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

回答

相关问题