Ionic View not displaying app images

Ionic Framework ionic-v3
1

The app is an Ionic 2 app and when I run ionic serve I can see all images in the browser. However when I upload the app via ionic upload and view it on Android Marshmallow, none of the referenced images in the applicatin appear, all I see is the broken image icon. I’m storing the images in /src/assets/img/ and when I reference them in the HTML I set the src to /assets/img/folder/image.png, I’ve also tried ./assets/img/folder/image.png. Any help is appreciated.

2

have you tried ../../assets/img/folder/image.png or ../assets/img/folder/image.png ?

3

I have tried both …/ and …/…/ but neither worked.

4

have you resolved this? this happens to me too

5

Unfortunately I have not solved this issue yet.

6

this worked for me,

< img src=“assets/images/image.png” alt=“Logo” >

now i can see images with ionic serve and in ionic view app

1 Like
7

Not sure what the end issue really was but it works now. I deleted the app from Ionic View then re-uploaded it and the images started working. It has worked with using your recommendation as well as …/…/ so…it works now. Thanks for the help!

8

I’m having the same issue but still can’t get it working. I’m setting a background image in a component’s css:

background: url('/assets/images/myimage.jpg')

I’ve got my image under /src/assets/images, and see it fine with ionic serve. It doesn’t show up in Ionic View though. I tried removing / reuploading the app.

edit: using 2.0.0-rc.3

9

I figured it out. My image path needed to be:

background: url('../assets/images/myimage.jpg')

And now I can see the image both with ionic serve and via Ionic View. This makes sense, as main.css is in the build folder, so you have to go up one folder when referring to images in css.

10

I’ve tried all the above and I’m still having issues. It shows on the browser, but not on Ionic View. Any other thoughts?

11

What is the path to the pictures in your app?

12

@pmourad Did you ever get this resolved? I’m running into the same issue and I’m unable to find a solution anywhere. Very odd behavior.

Thanks

CG

13

Same issue. My image works on browser but not in IonivView…

14

@Annalisape - Strange that I can’t find a solution to this issue. Only encountered after I moved to the new Ionic View App. Did not have any problems with the previous app.

15

Now, using
imgSrc = ./assets/images/logo.png;
in .ts file
and write in the template
<img [src]=“imgSrc”>
it works.