фоновое изображение ионного содержимого 4- не отображается на устройстве

#ionic4

Вопрос:

Я пытаюсь добавить фоновое изображение в мое ионное содержимое, вот мой текущий код:

 ion-content{
    --background: none;
    background-image: url('/assets/images/home-background.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

Я также попробовал следующее, но произошло то же самое.

 ion-content{
    --background: url('/assets/images/home-background.png')  no-repeat center center / cover;
    text-align: center;
}

Он работает в браузере, но когда я делаю ionic cordova run android , фоновое изображение не отображается. Я также пытался изменить URL на url('../assets/images/home-background.png') , url('./assets/images/home-background.png') и url('../images/home-background.png') , но это выдает ошибку.

Я попытался проверить его и отладить, и, возможно, это может помочь, я щелкнул по URL, и он приводит меня к ресурсам, которые показывают мне изображение

На этом втором изображении я увидел домашний фон.png

1. коды, которые я пробовал, отлично работают в браузере, но когда я пытаюсь запустить ionic cordova на Android, фоновое изображение не отображается.

2. Я даже пытался сделать это -ion-background-color: #f04141;, ошибки нет, но все же фон моего ion-content белый, когда дело доходит до устройства Android, но работает в браузере

Ответ №1:

у меня не было возможности решить эту проблему с помощью ионного содержимого, поэтому я изменил ионное содержимое на div, и это решило мою проблему. Работает в Интернете и на устройствах Android.

1. привет @Constantine Awa-ao Можете ли вы помочь мне решить эту проблему? вы можете поделиться для меня? Спасибо

2. привет @thanhdung0312, извините за поздний ответ, боюсь, это вам не поможет, но что я сделал, так это заменил ионный контент на div и присвоил этому div идентификатор #content_container, а в файле scss я сделал типичный #content_container{ background-image: url(«myijmage.png»); }

Ответ №2:

Откройте файл scss:

 ion-content {
    background: url('../../assets/img/myBg.jpg') center bottom no-repeat;
    background-size: 100%; 
}

1. Привет, спасибо за ваше предложение, могу я узнать, какая часть решит проблему? установлен ли размер фона на 100%?

2. не только 100%, но и дно без повторений. у меня все работает нормально.

3. Я пытался, но все еще не отображается. Я попытался отладить приложение на своем устройстве Android в своем браузере, оно не выдает никаких ошибок, но изображение не отображается.

Ответ №3:

Попробуйте изменить путь к хранению изображений в главной папке www / assets / img, а затем установите

 background-image: url('assets/img/home-background.png');

1. извините за поздний ответ, для создания приложения на моем устройстве Android требуется время, и оно все еще не работает. я попытался скопировать изображение в www / assets / img и попробовать код, и он выдает ошибку «Не удается разрешить»assets /img /home-background.png»

Ответ №4:

фоновое изображение: url(‘..assets/img/home-background.png’);

если вы установили путь, просто введите .. / или ./ автоматически путь будет предложен

Ответ №5:

Вы можете попробовать изменить URL-адрес вашего изображения, как показано ниже

 ion-content{
--background: none;
background-image: url('../../assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}

у меня это сработало.