I'm encountering a perplexing issue with Ionic 3 (specifically involving template binding, I believe, and styles) that has been perplexing me for the past few days. Despite my efforts, I've been unable to pinpoint a solution or identify the cause of this problem. I really hope someone can assist me in troubleshooting and resolving whatever is causing this dilemma.
I am currently developing an application using Ionic 3. On one of the pages, there is a list comprising text and images set as background-images. This is where the issue arises. The images are not displaying, and despite attempting numerous solutions found online, I cannot seem to get them to work.
The images are located in the local assets folder. The path to the image is stored in an array of objects with an 'image' property containing the path (assets/imgs...). I am confident the path is correct because if I use [src]="coto.image" (a single element and its property generated by *ngFor), the image displays correctly. For binding the background-image, I have tried:
[style.backgroundImage]="'url(' + coto.image + ')'"
[ngStyle]="{'background-image': 'url(' + coto.image + ')'}"
style="background-image: url({{coto.image}})"
Note: absolute external URLs ARE functioning. For example:
[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)"
However, if I assign a variable = "https://example.com/image.jpg" and bind it to the template in the same way I do with coto.image (
[ngStyle]="{'background-image': 'url(imageVar)'}"Another peculiar observation is that even when manually setting the route of the local image (assets/imgs...; the same as what should be passed by the coto.image item from *ngFor), it still does not function – which is extremely baffling to me.
I have also attempted using DOMSanitizer's bypassSecurityTrustStyle, but without any success...
<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>
If anyone possesses insights into what might be happening here, I would greatly appreciate hearing from you, as the more I try to resolve this issue, the more bewildered I become.
Thank you very much!
*P.S: Apologies for any grammatical or spelling errors I may have made; English is not my native language =)