Img is not loaded

Ionic Framework ionic-v3
1

Hello,

sometimes the img is not shown, any idea?


 <ion-list>
    <ion-item *ngFor="let car of cars let i = index">
      <ion-img item-left [src]="assets/img/car"></ion-img>
      <h2><strong>{{ car.name}} </strong></h2>
    </ion-item>
  </ion-list>
2

Is it always a static image like that?

If so, you don’t need to be binding, so:
<ion-img item-left src="assets/img/car"></ion-img>

You should also probably specify the extension.

1 Like
3

no it’s not static binding.


  getImg(car: Car) {
    if (car.car_type === 'BMW') {
      return "assets/img/bmw.svg";
    } else {
      return "assets/img/others.svg";
    }
  }

 <ion-list>
    <ion-item *ngFor="let car of cars let i = index">
      <ion-img item-left [src]="getImg(car)"></ion-img>
      <h2><strong>{{ car.name}} </strong></h2>
    </ion-item>
  </ion-list>

But sometimes the image is not shown, I dont know why

4

The problem is with *ngFor… and
When I use img instead of ion.img it works fine. Is their any solution?

5

The solution is indeed to use img. <ion-img> is only for virtual scroll.

6

ok… how can I reach the item-left behaviour of ion-img. So that the icon is left of the text


 <ion-list>
    <ion-item *ngFor="let car of cars let i = index">
     <img style="width: 3vh;height: 3vh; float: left;" src="assets/img/BMW.png"/>
      <h2><strong>{{ car.name}} </strong></h2>
    </ion-item>
  </ion-list>
7

Hello,
h2 is a block element.
Maybe it helps, when you put your image inside h2.
A other way maybe it helps to change block elements to inline elements.

Best regards, anna-liebt

8

You can use item-left on img elements as well. It’s not restricted to ion-img.

9

I’m not sure if this will help. Try to use px instead of vh on stylesheet.