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