Не могу установить фоновое изображение в ionic 4 div из шаблона

Question

Я создаю мобильное приложение с ionic и пытаюсь изменить фоновое изображение div, но оно не работает

Вот код

<div style="background-image: url(./assets/IMG/set3.jpg);">
......
</div>

Я также изменилпуть к файлу

style="background-image: url(assets/IMG/set3.jpg);"

style="background-image: url(./assets/IMG/set3.jpg);"

style="background-image: url(/assets/IMG/set3.jpg);"

И у меня есть другой div такого, но фоновое изображение не отображается, пожалуйста, мне нужна ваша помощь, у меня есть поиск в Интернете, но ни одно из решений не сработало

Answer 1

Если ваша цель - установить фоновое изображение на всю страницу, вы можете использовать --background для ion-content. Что-то вроде следующего сработало для меня.

ion-content {
--background: url('../../assets/BackgroundImages/splash-screen-background.png');
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
}

здесь подробнее о --background свойства CSS

Answer 2

Вместо установки background-image непосредственно с тегом стиля внутри вашего <div>, дайте ему класс. Затем, внутри вашего CSS, определите background-image для этого класса. Таким образом, папка IMG должна относиться к файлу CSS или корню приложения. Это всегда заводит меня в каждый новый проект, и для правильной работы требуются пробные и ошибочные действия.

Answer 3

В некоторых средах разработки (Visual Studio Code) вы можете щелкнуть по URL-адресу ctrl (перейти по ссылке) и убедиться, что ресурс правильно указан. Вы можете перепроверить. Даже в противном случае, пожалуйста, проверьте, присутствует ли ваша папка ресурсов на том же уровне, что и html вашей страницы. Если это не так, возможно, вам придется обеспечить правильный путь, например.

background-image: url('../../assets/BackgroundImages/splash-screen-background.png');