Angular 15 在背景网址中添加“”

Answer 1

您面临的问题与浏览器如何编码 URL 中的特殊字符有关。在本例中，

"

字符被编码为

"

，这导致了问题。

要解决此问题，您应该使用 Angular 的属性绑定语法，而无需手动连接字符串。像这样修改你的模板代码：

模板：

<picture class="picture background-image" [style.background-image]="'url(' + componentParams.link + ')'" [title]="componentParams.title">
</picture>

在此更新的代码中，我们对

[...]

和

style.background-image

使用属性绑定语法 (

title

)。通过这样做，Angular 将处理特殊字符的正确编码，并且您不应再在 URL 中看到

"

。

此外，在模板中访问

this

时无需使用

componentParams

，因为 Angular 会自动知道您正在引用组件的属性。

经过这些更改，渲染的输出应该是：

<picture _ngcontent-ng-c4105489152="" class="picture background-image" title="Montagem de imóveis" style="background-image: url(../../../assets/images/category/montagem-moveis.png);"></picture>

现在，

style

属性应包含正确的 URL，无需

"

编码。