Angular 7中，[style.background-image]属性中的动态图像路径未显示

Question

我正在尝试在我的Angular6项目中使用动态图像路径作为背景图像。 我尝试使用[style.background-image]& [style.background]甚至encodeURI来修复路径中的空格，还尝试使用*ngIF以便在加载后呈现。

情况1：

imgPath是绝对路径，我正在将JSON数据的路径附加到其中。

HTML代码：

    <a routerLink="/article/{{news.id}}">        
      <img [style.background-image]="'url(' + imgPath + news.encodedImage.encocoded_primary_image + ')'">          
    </a>

组件

使用encodeURI()函数检查图像中的空格和其他括号。

'encocoded_primary_image': encodeURI(res['primary_image']['file_path'])

输出

此处图片的对比

如图所示，“s/Absorica%20(2).png” 中有括号，这可能导致错误，但不能确定。

其他情况

我已尝试过使用[style.background]，[ngStyle]，将图片标签更改为div标签等方法。

但是我无法理解为什么一些图像正在呈现，而另一些图像则没有呈现，虽然路径已经正确生成，我通过在新标签页中打开它们进行确认。

非常感谢任何帮助。

- Gaurav Janoti

---

请在 StackBlitz 中提供演示，谢谢。我不确定是否完全理解了所有内容。哪些文件无法正常工作？有没有规律可循？括号不应该对 Angular 造成影响。 - Joniras

@Joniras，问题已经解决了。你可以查看下面的解决方案，它对我有效。 - Gaurav Janoti

Answer 1

在background-image: url中，接受字符串。您需要将图像路径添加到字符串中。 "'url(\'' + imgPath + news.encodedImage.encocoded_primary_image + '\')'"

<a routerLink="/article/{{news.id}}">
  <img [style.background-image]="'url(\'' + imgPath + news.encodedImage.encocoded_primary_image + '\')'">
</a>

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image

https://www.w3schools.com/zh/cssref/pr_background-image.asp

2. 尝试使用 escape() 方法，但此方法已被弃用。请小心使用。

   https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/escape

- Ashish Singh Rawat

---

对的，escape()已经过时了，encodeURI()在某些特殊字符上可能会丢失，因此最好将图像路径作为字符串处理。 - Gaurav Janoti

Answer 2

不要使用任何ElementRef、DomSanitizer

在组件中：

img = '';
data(){       //image url -> if it comes from anywhere & any time
   this.img = 'http://img.....'
}

在模板中： 可在任何支持的标签中使用

<div style="background-repeat: no-repeat; background-size: cover;"
 [style.background-image]='"url(\"" + banner + "\")"'></div>

//或者

<div style="background-repeat: no-repeat; background-size: cover;"
 [style.background-image]="'url(\'' + banner + '\')'"></div>

- rajkanani