Angular 2 ngStyle 和背景图像 [重复]

Posted 2023-02-22

【中文标题】Angular 2 ngStyle 和背景图像 [重复]

【英文标题】：Angular 2 ngStyle and background-image [duplicate]

【发布时间】：2018-02-12 22:29:39

【问题描述】：

我在使用 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='...' 中使用它时它工作得很好）：

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

【问题讨论】：

见***.com/questions/37076867/…

如果你的意思是 domSanitizer - 我已经尝试过了 - 没有任何改变:(

替代[style.background-image]="'url('+images[i].file+')' | safeResourceUrl"（管道使用bypassSecurityTrustResourceUrl(value)

另见***.com/questions/39524536/angular-2-disable-sanitize

尝试添加管道 - 没有结果。还尝试添加 sanitizer.bypassSecurityTrustStyle() - 相同，没有结果。

【参考方案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);
  

【讨论】：

抱歉，不工作