切换背景图像 - Angular 2

Question

我有一个带有这种样式的组件：[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'}"

Answer 1

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

see this post

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

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

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