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

dynamic image path not showing in [style.background-image] property in Angular 7

我正在尝试在我的 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'])

输出

Image comparison of article

如图所示 "s/Absorica%20(2).png" 有括号,这可能是导致错误的原因,但不确定。

其他情况

我试过 [style.background][ngStyle] ,将图像标签更改为 div 标签。

但我无法理解为什么只有少数图像在渲染,而很少有图像没有渲染,尽管路径生成正确,我已通过在新选项卡中打开它们来确认这一点。

任何帮助将不胜感激

  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

  1. 尝试使用 escape() 方法,但此方法已被弃用。谨慎使用。

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

不要使用任何 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>