来自 API 的背景图片

Question

我在 Angular 应用程序中使用 Spotify API，我想知道您是否可以从 API 中的对象设置背景图像？我试过这样的东西

<div *ngIf="artist.images.length > 0">
   <div style="background-image: url("artist.images[2].url")">
   </div>
</div>

Answer 1

你在这里漏掉了什么，Angular 需要双花括号来渲染模板中的范围变量（当你不会在指令中使用它时，例如 ngIf 等）：

<div *ngIf="artist.images.length > 0">
   <div style="background-image: url("{{ artist.images[2].url }}")">
   </div>
</div>

Answer 2

这可能是您要查找的内容：

<div *ngIf="artist.images.length > 0">
    <div ng-style="{'background-image': 'url('+artist.images[2].url+')'}"></div>
</div>

Answer 3

你试过了吗：

<div *ngIf="artist.images.length > 0">
   <img [src]="url">
</div>

其中 url 是您的图像 url。

Answer 4

在提到的双花括号旁边...

根据 spotify docs 它应该声明：

<div *ngIf="artist.images.length > 0">
  <div style="background-image: url("{{ data.artists[0].images[0].url }}")">
  </div>
</div>

Answer 5

Angular5 中的答案：

[ngStyle]="{'background': 'url('+artist.images[2].url+')'}"

Background image from API