Setting html img properties

Ionic Framework ionic-v3
1

Hi.
I am trying to create a “list” of images.

I originally tried:

<img [src]="p.url"/>

This did not work, so to check if p.url was there, I did:

<img [src]="p.url" [alt]="p.url" />

This still did not show anything.

To test that the alt tag did actually work, I changed it to alt="test"
This showed test.

To make sure p.url actually existed, I added:

<i>{{p.url}}</i>

This showed without any trouble.

I tried changing the image to:

<img src="{{p.url}}" alt="{{p.ul}}" />

This still does not show anything.

Am I doing something obviously wrong?

Thank you very much
Jonathan

2

so just to double check you have something similar to this

<div *ngFor="let p of pictures">
   <img [src]="p.url">
</div>

Hmm, could you check the dev tools, see if there are any errors showing up?

3

Pretty much, yes.

Interesting, I have since tested on my iPhone, and this code works there. It is in an Android emulator that this is not working.

If you want to see my exact code:

<ion-content padding>
  <ion-card *ngFor="let p of asset.photos">
    <img [src]="p.url" [alt]="p.url" />
    <ion-card-content>
      <ion-card-title>{{p.id}}</ion-card-title>
      <p>Photo: <i>{{p.url}}</i></p>
    </ion-card-content>
  </ion-card>  
</ion-content>
4

Hmm, check your CSP, check the dev to see if the image is actually loading