切换背景图片 - Angular 2答案

【问题标题】：Switch background image - Angular 2切换背景图片 - Angular 2
【发布时间】：2017-12-19 14:30:34
【问题描述】：

我有一个具有这种样式的组件：[ngStyle]="{background: 'url(http://somedomain/api/'+event.EventID+'/otherUrlItems/image) no-repeat center center'}" 服务器上有组件，第一个组件作为背景图像添加。我应该如何为那些没有关联任何图像的组件添加默认背景图像？

更新： 这对我有用：

[ngStyle]="{'background': 'url(http://somedomain/api/'+event.EventID+'/otherUrlItems/image) no-repeat center center, url(https://placeimg.com/640/480/any) no-repeat center center'}"

【问题讨论】：

Combine [NgStyle] With Condition (if..else)的可能重复
你的单引号放错了。
@Brian，这对我有帮助：stackblitz.com/edit/angular-4kwerh。感谢 Pierre Mallet。

标签： html css angular background

【解决方案1】：

如果您的应用程序无法知道此事件是否有可用的背景，您可以尝试多个背景图像（最后设置您的默认图像）

see this post

另一种可能性是向您的 DOM 元素添加一个类并直接在 css 中设置背景图像。然后ngStyle添加的样式会覆盖css。

但副作用是您将在客户端浏览器中收到 404 请求。最好的选择是 IMO 在您的后端托管默认背景，并在没有可用图像时提供它

如果您的 Angular 应用程序知道图像是否可用，请查看 Brian 评论中的帖子

【讨论】：

你知道ngStyle是否支持多url背景吗？