动态图像路径未显示在 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标签。

但是我无法理解为什么很少有图像在渲染而很少有图像没有渲染，尽管路径正确生成，我已经通过在新选项卡中打开它们进行了确认。

任何帮助将不胜感激

Answer 1

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/en-US/docs/Web/CSS/background-image

https://www.w3schools.com/csSref/pr_background-image.asp

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

   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape