角度2 ngStyle和背景图像

Question

我对Angular 2 ngStyle指令有很大的麻烦。我无法从base64编码文件中设置背景图像。现在在template.html我有这个：

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

其中'images'是base64编码的.png文件及其名称的数组。

Console.log of images [3] .file给我这个（麻烦不在图片中，当我在img src ='...'中使用它时效果很好）：

有什么想法吗？非常感谢您的回答！ ：）

Answer 1

收到的base64图片中的换行符是一个麻烦的原因。 这是我的解决方案：

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