У меня очень странная проблема с Ionic 3 (связывание шаблонов, особенно со стилями), из-за которой я заблокировал эти последние дни, не имея возможности найти решение или даже не зная, что может быть причиной этого.Я надеюсь, что кто-нибудь может помочь мне устранить неполадки и исправить все, что происходит.
Я работаю над приложением в Ionic 3.На одной из его страниц есть список, содержащий текст и изображения в качестве фоновых изображений.Здесь появляется моя проблема.Изображения не отображаются, и я не могу найти способ заставить их работать, хотя я перепробовал все возможные решения, которые я прочитал по всему Интернету.
Изображения находятся в локальной папке assets.Путь к изображению исходит из массива объектов, у которого есть свойство 'image', содержащее путь (assets/imgs...). Я уверен, что путь правильный, потому что если я использую с [src]="coto.image" (single element and his property, generated by an *ngFor), изображение отображается.Для привязки фонового изображения я попытался использовать:
[style.backgroundImage]="'url(' + coto.image + ')'"
[ngStyle]="{'background-image': 'url(' + coto.image + ')'}"
style="background-image: url({{coto.image}})"
Примечание: работают абсолютные внешние URL.Например:
[style.backgroundImage]="'url(https://example.com/image.jpg)'"
[ngStyle]="{'background-image': 'url(https://example.com/image.jpg)'}"
style="background-image: url(https://example.com/image.jpg)"
НО, если я установлю переменную = "https://example.com/image.jpg" и свяжу ее с шаблоном, так же, как я делаю с coto.image ([ngStyle] =" {'background-image ':' url (imageVar) '} ", это тоже не работает.
Еще одна вещь, которую я заметил, это то, что если я устанавливаю маршрут локального изображения вручную, (assets / imgs...; то же самое, что должно быть передано элементом coto.image из * ngFor), он все еще не работает, что кажется мне наиболее странным.
Также пробовал bypassSecurityTrustStyle из DOMSanitizer, с любымрезультаты ...
<div class="image" [ngStyle]="{'background-image': 'url(' + coto.image + ')', 'min-height': '180px'}">
<!-- <div class="image" [style.minHeight.px]='180' [style.backgroundImage]='"url(" + coto.image + ")"'> -->
<!-- <div class="image" style="background-image: url({{ coto.image }})"> -->
<!-- <img [src]="coto.image"> -->
</div>
Если у кого-то есть какие-либо знания о том, что здесь происходит, я был бы очень признателен, чтобы прочитать его, потому что чем больше я пытаюсь решить эту проблему, тем больше я чувствую себя потерянным.
Большое спасибо!
* PS: извините за любую грамматическую или орфографическую ошибку, которую я допустил, английский не мой родной язык =)