Image don't show on devices

Ionic Framework ionic-v3
1

hi, i have my api when a make a http request in the browser everything works well, but on the devices android image dont’show!!! any help please?

2

What is the code you use to include images?
Does it work in ionic serve?

3

with ionic serve it work, not in the device

<ion-list>
    <button ion-item *ngFor="let data of reponse"  >
      <ion-thumbnail item-start>
        <img [src]="data.photo" />
      </ion-thumbnail>
      <p>{{data.nom}}</p>
    </button>
  </ion-list>
4

What is the value of data.photo?

Are these local pictures or from remote locations?

5

photo is the column in my api, pictures are on aws s3

6

Then check your devices console log for output:

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android
Look at the console and network tabs for errors.

7

no error when i debug

8

This is not possible, otherwise it would show the image (or you don’t actually try to load the picture there).

9

I had the same issue : Here’s what fixed it :

Change your image paths from ‘…/assets/images/someimg.jpg’ to 'assets/images/someimg.jpg’
The reason this works is because index.html is the file that runs the app, so your image paths need to be relative to index.html.

10

Your images were stored locally not remotely.
Because they exist in your assets

1 Like
11

Oh right, missed the part where he said his pictures were on aws s3. My bad

12

Any Idea ? I don’t find any error when debuging

13

No errors, like i told you !!!

14

Maybe you place the photo in the wrong path??

try to put the photo in www/assets/img/img.png and then in code

<img class="classname " src="assets/img/img.png"/>
15

So you are telling me that 1) the images are showing in the browser when using ionic serve but 2) they are not showing when testing on Android after building with ionic cordova build android and 3) you are not getting any network or console output that looks like an error? That is pretty much impossible.

If it is a security problem, the network panel will show something with the HTTP request.
If it is a wrong/broken URL, same.
If it is a HTML/JS problem, you will get something in the console.

16

This happen to me one time… I fix it like i mentioned above

17

Yes but as written multiple times above he is not talking about a local file in assets.

18

If it is a remote connection, does the async pipe need to be used, as it does when connecting with Firebase?

to
<button ion-item *ngFor="let data of response | async">

19

can i talk to you in private?

20

i’m using heroku hosting not firebase