Angular 15中background-url自动添加&quot问题求助

原因 #

这是Angular属性绑定的自动转义机制导致的。当使用[style.background-image]这种方括号属性绑定语法时，Angular会自动对绑定字符串里的双引号做HTML实体转义，把双引号转换成"来避免HTML语法冲突，但这会让背景图URL被错误包裹转义后的引号，进而影响图片加载。

解决办法 #

有几种简单的方式可以解决这个问题：

1. 使用ES6模板字符串拼接URL

用反引号包裹整个url()表达式，通过模板字符串插入路径，不会触发不必要的转义：

<picture class="picture background-image" 
  [style.background-image]="`url(${componentParams.link})`"
  title="{{componentParams.title}}">
</picture>

2. 用单引号包裹URL路径

拼接字符串时，用转义的单引号包裹路径，生成url('xxx')的格式，避免双引号被转义：

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

3. 使用ngStyle指令绑定

通过ngStyle直接设置样式对象，同样能避开转义问题：

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

另外注意：模板里访问组件属性时不需要加this.，直接写componentParams.link就行，模板上下文默认指向当前组件实例。

内容的提问来源于stack exchange，提问作者Sabrina B.