我正在尝试在我的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标签等方法。
但是我无法理解为什么一些图像正在呈现,而另一些图像则没有呈现,虽然路径已经正确生成,我通过在新标签页中打开它们进行确认。
非常感谢任何帮助。