No pictures on phone or emulator, but in browser

Ionic Framework ionic-v3
1

In my project folder assets/imgs I added several jpg images (e.g. …/…/assets/imgs/IMG1.jpg). If I run the project within a browser (ionic serve) the photos are shown as expected. If I build (ionic cordova build android) the app and run it on my phone or on the emulator the pictures are not shown instead a picture indicating a broken link. Do I specifically have to include the photos?

2

i had this problem,i solved it by checking the name of the image and caps lock.

For example:

assets/imgs/Hello.png

my image was hello.png and not Hello.png

3

Yeah that happened to me too as @saidmrn posted. I would recommend to always write your images in lowercase and use dashes and not underscore/spaces/camelcases for the names of the images. Also .png while heavier makes the pictures look way better, so use that.

1 Like
4

I changed all the letters to small ones, am not using any underscores or spaces and changed the files to png. Still the same problem. Any more ideas?

5

Hello,
everything wil be copied into www folder. So you must reference from the view of index file.

In your case …/…/assets/imgs/IMG1.jpg is in src available as long you serve to the browser, because rthere is a src folder. When you build your app, then there is no src folder and path is broken.

Depending from where you reference, then your url/path is different.

In Html for an ing tag it would be

<img src='assets/yourfolder/yourfilename.png'>

A background image from from. scss looks like

.yourcssclass{
    background-image: url('../assets/yourfolder/yourfilename.png') no-repeat;
}

Maybe it helps.

Best reagards, anna-liebt

3 Likes