I have Ionic3 App and ion-slides component on main page.
<ion-slides pager>
<ion-slide *ngFor="let blog of blogs | async" >
<h2>{{ blog.title }}</h2>
<p>
<a target="_blank" class="slider-read-more" ion-button outline color="secondary" (click)="blogDetail(blog)">ვრცლად</a>
</p>
</ion-slide>
</ion-slides>
I want to add inline css background image using style
<ion-slide *ngFor="let blog of blogs | async" style="background:url(blog.image) no-repeat center center fixed;">
but can't pass blog.image inside. how to do this?
You can try as shown below:
i.e. use backgroundImage
as a property binding:
<ion-slide [style.backgroundImage]="'url(' + blog.image + ')'"> ...
I have used ngStyle directive to set an ion-slides style. v-3.0
[ngStyle]="{'background-image': 'url(' + blog.image + ')'}"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With