Angular 13中无法设置div背景图片？求正确实现方法

你的代码语法本身没大问题，但有两个核心点没注意到：

• div必须设置宽高：默认情况下，空div的宽高都是0，就算背景图路径正确也看不到。
• 可以优化绑定语法，避免引号嵌套的潜在解析问题

正确写法示例 #

1. 直接在模板中写死URL

<div 
  [style.background-image]="'url(https://picsum.photos/200)'"
  style="width: 200px; height: 200px; background-size: cover;"
></div>

background-size: cover是为了让图片铺满div，避免拉伸变形，也可以根据需求换成contain。

2. 绑定组件类中的变量（更灵活，适合动态修改）

组件.ts文件：

imageUrl = 'https://picsum.photos/200';

组件.html文件：

<div 
  [style.background-image]="`url(${imageUrl})`"
  style="width: 200px; height: 200px; background-size: cover;"
></div>

用模板字符串（反引号）的写法更直观，也不会出现引号冲突的问题。

额外注意事项 #

如果是本地图片（比如放在assets文件夹），要确保路径正确，比如：

<div 
  [style.background-image]="'url(./assets/images/xxx.jpg)'"
  style="width: 200px; height: 200px;"
></div>

内容的提问来源于stack exchange，提问作者IonicMan