динамически фоновое изображение не работает на Android с ионной

Question

Привет, я хочу загрузить динамически фон на Android с ионной 3

Я пытаюсь это

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

И

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

Работа на iOS иBrowser но не работает на Android

Можете ли вы мне помочь?

Answer 1

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

обычно такой URL-адрес требует кавычек, поэтому Android может не понравиться без них: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

• У вас есть: url (assets / imgs / image.jpg)
• У вас должно быть: url ("assets / imgs / image.jpg")

Сейчастак как вы хотите использовать привязку ngStyle, я бы порекомендовал:

1. В вашем файле ts есть объект, который определяет стиль, и используйте обратные кавычки там (извините, выкладываем здесь питчерздесь прекоду не нравится обратная цитата:

2. Привязка в вашем шаблоне:

   [ngStyle] = "styleData"

Дайте мне знать, если это поможет.

Answer 2

Мне понравилось следующее и успешно:

.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 на моей машине, но вы могли использовать другое изображение.