如何在Ionic中设置Div背景图片？解决ngStyle返回[object object]问题

你的问题出在[ngStyle]中background-image的写法错误，模板表达式里的字符串拼接语法不正确，导致Angular解析时生成了无效对象，最终显示[object object]。

修正方案 #

方案1：使用模板字符串（推荐）

利用ES6模板字符串语法直接插值图片URL，写法简洁清晰：

<div class="col m-2 image row"
     *ngFor="let aa of activiteAvenir"
     [ngStyle]="{'background-image': `url(${aa.image})`}"
     style="background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 10px;">
</div>

方案2：传统字符串拼接

如果习惯用传统拼接方式，要确保整个url()表达式被单引号包裹后再拼接变量：

<div class="col m-2 image row"
     *ngFor="let aa of activiteAvenir"
     [ngStyle]="{'background-image': 'url(' + aa.image + ')')}"
     style="background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 10px;">
</div>

方案3：处理空值/无效URL（可选）

如果aa.image可能为空或无效，建议添加兜底逻辑避免背景加载失败：

<div class="col m-2 image row"
     *ngFor="let aa of activiteAvenir"
     [ngStyle]="{'background-image': `url(${aa.image ?? 'path/to/default-image.jpg'})`}"
     style="background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 10px;">
</div>

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