Ionic 3: файл изображений не загружается в устройства - PullRequest
0 голосов
/ 24 апреля 2019

Я не мог понять, что пошло не так.Когда я пытаюсь ionic serve все загружается правильно.Но когда я пытаюсь запустить его на устройстве Android, ни одно из изображений не загружается и вместо этого показывает ошибку Failed to load resource: net::ERR_FILE_NOT_FOUND Ни одно из изображений не загружается должным образом.

мой файл scss

.bg-image{
        background-image: url('../../assets/imgs/bgimage.png');
        background-repeat: no-repeat;
        background-size: 200%;
        background-attachment: fixed;
        position: absolute;

мой HTML-файл

<div class="bg-image">
.
.
</div>

не могу понять, пожалуйста, помогите.

Ответы [ 3 ]

1 голос
/ 24 апреля 2019

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

background-image: url('assets/img/bgimage.png');
0 голосов
/ 24 апреля 2019

Здравствуйте,

    .bg-image{
      background-image: url('../assets/imgs/bgimage.png');
      background-repeat: no-repeat;
      background-size: 200%;
      background-attachment: fixed;
      position: absolute;
    }

При адресации изображений из ваших файлов .ts используйте относительный путь ../assets, потому что сначала нам нужно выйти из каталога сборки.,При обращении к изображению из ваших файлов .html используйте относительный путь к ресурсам, потому что в конечном файле apk все HTML объединяются в один файл с именем index.html, который находится рядом с каталогом ресурсов, и нет необходимости подниматься на один файл вверх.уровень до достижения ресурсов.

Добавьте ваши изображения в каталог src / assets / imgs

Задайте путь к изображению в HTML как

<img src="assets/imgs/bgimage.png">

Установите путь к изображению в SCSS как

background-image: url(../assets/imgs/bgimage.png);

Будет работать браузер, эмулятор и сборка

надеюсь, что вам это поможет:)

0 голосов
/ 24 апреля 2019

Попробуйте это.

.bg-image{
        background-image: url('/assets/imgs/bgimage.png');
        background-repeat: no-repeat;
        background-size: 200%;
        background-attachment: fixed;
        position: absolute;
...