动态背景图片不适用于带有离子的android

Question

嗨，我想用离子3在Android上动态加载背景

我尝试

[style.backgroundImage]="'url(assets/imgs/' + station.name + '.jpg)'"

还有

[ngStyle]="{'background-image': 'url(../../assets/imgs/' + station.name + '.jpg)'}"

使用iOS和Browser，但不使用Android

你能帮我吗？

Answer 1

我很喜欢以下内容并取得了成功：

.html

<ion-content no-padding [style.background]="'url(assets/imgs/' + station.name + '.png)'"> 

</ion-content>

.ts

export class Page1Page {
  station: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.station = {
      name: "logo",
    }
  }
}

请注意，图像文件应放置在正确的文件夹中

我在机器上使用了logo.png，但是您可以使用其他图像。

Answer 2

styleData = {
    "someCSSproperty": "someValue",
    "background-image":`url('assets/imgs/'${station.name}'.jpg)`
}

通常，此类网址需要带引号，因此，如果没有这些网址，Android可能会不喜欢它： https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

• 您有网址（资产/imgs/image.jpg）
• 您应该具有： url（“ assets / imgs / image.jpg”）

现在，既然您想使用ngStyle绑定，我建议：

1. 您的ts文件中包含定义样式并使用反引号的对象（很抱歉，此处将pitcure粘贴为预编码，因为此处的预编码不喜欢反引号：

2. 绑定模板：

   [ngStyle] =“ styleData”

让我知道这是否有帮助。