ion-img tag not showing online image url

3.6k Views Asked by At

I am trying to show the image in ion-img tag from the internet but when I put the link in src or when I inspect, it shows only 30 chars from the URL, rest of the chars from the URL is not getting.

for eg: url http://192.168.1.88/pg/profilepic/image.jpg

so when I inspect, it shows only

http://192.168.1.88/pg/profile

what is the problem..

I want to show in

<ion-list>
<button ion-item *ngFor="let item of data.result | filter : searchText" [navPush]="pushPage" [navParams]="{id:item.id}">
  <ion-img src="http://192.168.1.88/pg/profilepic/image.jpg"></ion-img>
  {{item.name}}
  <div class="item-note" item-end>
    {{item.desc}}
  </div>
</button>

1

There are 1 best solutions below

0
Vafilor On

Realize this is an old(ish) question. But I ran into the same problem recently.

I believe it is not using the virtual scroll like Suraj Rao said.

The following worked for me

<ion-list [virtualScroll]="itemsArray">
   <ion-item *virtualItem="let item">
     <ion-img [src]="item.url"></ion-img>
   </ion-item>
</ion-list>

Where itemsArray is an array, and item is an element of that array with a url property.

In your case, I'd try

<ion-list [virtualScroll]="data.result | filter : searchText">
<button ion-item *virtualItem="let item" [navPush]="pushPage [navParams]="{id:item.id}">
  <ion-img src="http://192.168.1.88/pg/profilepic/image.jpg"></ion-img>
  {{item.name}}
  <div class="item-note" item-end>
    {{item.desc}}
  </div>
</button>

Sources

https://ionicframework.com/docs/api/components/img/Img/ https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/