CODEWITHSUNDEEP
androidangulartypescriptionic-frameworkionic3
codewiz
codewiz

Reputation: 521

How to use ion-img in ionic 3 app?

I'm building an ionic 3 app which contains lot of images in different pages.I tried this,using the default HTML image tag.But using that resulted in getting lag in using the app,also getting lot of issues like images size changes when screen rotates resulting sometimes in overlapping of images,ugly loading of images.

I looked up in Ionic documentation to find out that it's better to use ion img tag to remove these issues.With that lazy loading,smooth scroll all can be achieved.I'm already using virtual scroll,but not using ion-img for images,but using img tag for loading images.

When i used ion-img as given in ionic documentation,no images are loaded only empty spaces are displayed.Here is the code,

HTML:

<ion-header>
  <ion-navbar color="dark">
    <button ion-button clear class="menubutton">
      <ion-icon name="menu" (click)="presentActionSheetCategory()"></ion-icon>
    </button>
    <ion-title><button ion-button clear (click)="goAbout()">appname</button></ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">
  <ion-list [virtualScroll]="categories">
          <ion-item *virtualItem="let category" class="itemcss">
              <ion-card collection-repeat="category in categories" (click)="category.golink()" class="wallcard">
                  <ion-img class='homecardimage' collection-repeat="category in categories" [src]="category.Url"></ion-img>
                  <div collection-repeat="category in categories" class="card-title">{{category.Name}}</div>
                </ion-card>
          </ion-item>
        </ion-list>
   </ion-content>

How to properly implement ion-img tag in Ionic 3? Thanks.

Upvotes: 3

Views: 10755

Answers (2)

Sampath
Sampath

Reputation: 65870

Update:

It seems this behavior is a bug in the virtual scroller with ion-img.It has been fixed on this PR.But still, it is not merged. Hope you can use ionic-image-loader here. You can see more about this issue here.

Old Feedback

You have done it wrongly. You can try as shown below.

    <ion-list [virtualScroll]="categories">
      <ion-item *virtualItem="let category" class="itemcss">
          <ion-card (click)="category.golink()" class="wallcard">
              <ion-img class='homecardimage' [src]="category.Url"></ion-img>
              <div class="card-title">{{category.Name}}</div>
            </ion-card>
      </ion-item>
    </ion-list>

Upvotes: 3

Nirav Tikadiya
Nirav Tikadiya

Reputation: 24

<ion-img class='homecardimage' collection-repeat="category in categories" src="category.Url"></ion-img>

Upvotes: 0

Related Questions