Images not loading in mobile

Ionic Framework ionic-v3
1

On ionic serve it is showing images…as expected.
but when i am using the same app on the mobile some images are not shown…

anyne facing the same issue?

1 Like
2

yeah facing the same issue but with tabs.
i added a thread to add custon images to my tabs but they only show on browser and not on my mobile phone.

here is a link to my thread also nobody could help me:

1 Like
3

true… even i am using tabs only…

4

@riteshbhat17 hi i resloved it by changing the source path.
The source path is causing that problem cause your phone cant find the images.
I changed it from:

background-image: url(../../assets/img/categories_active.png);

to

background-image: url(../assets/img/categories_active.png);

Now finally my images show on device!
So try to change your paths until you see your images on your device.
Cheers

11 Likes
5

in ionic you have a build process, which builds the app and you need to set the paths of static files like you are working with the build (www-folder) and not the source.

3 Likes
6

Yeah but in the developing Prozess you place the images in the src Folder because the images will be generated to the www Folder?

7

yeah the asset folder will be copied --> this is also done, if you run ionic serve

Reason: the www-folder is not part of your github repository in general. The the src folder keeps also any assets ;).

1 Like
8

do you mean like this.
‘www/assets/img/img1.jpg’

9

here i got it
’./assets/img/img1.jpg’
its showing in device and as well in browser too

9 Likes
10

yep, thats what i meant.

11

Thanks! It worked like a charm.

12

So. Using ionic 3.2, I can’t get background images to load on ionic view. I have folder structure

src/assets/images/image.jpg and www/assets/images/image.jpg

from my pages I try most everything
../assets/images/image.jpg
./assets/images/image.jpg
assets/images/image.jpg

And none of them seem to work. They load on the simulator and on the browser, using the first attempt (…/assets/), but never on ionic view.

Thoughts? @bengtler

1 Like
13

can you put a screenshot of your assets folder.
and the actual code which you are using.

14

in any case --> check your www-folder and then you have to build the paths relative to this.

so your generated css is in www/build/ and your assets in www/assets.

E.g. you defining a font path in your src/theme/variables.scss: $font-path: “…/assets/fonts”;

15

image
Screen Shot 2017-06-01 at 12.58.34 AM.png1712×722 113 KB

This is the actual code of main.css.

Want to see anything else? @riteshbhat17

16

Did you notice your folder has a capital i? Rename it from Images to images and check if it works.

17

Thanks @yannbf. I did not notice this. Strange that it works in in the emulator and ionic serve. I think it would be preferential for ionic to be case sensitive everywhere. I should have caught this, but it’s tough when everything works. If I got a 404 in ionic serve I would have figured this out. This really should not have worked anywhere!!

I haven’t checked this yet but I will soon. If you don’t hear from me again, everything worked and thank you :slight_smile:

18

Great that you got it solved already.
In browser the file paths are not case sensitive therefore Images or images will work without any error. But in mobile the file path or image names are case sensitive therefore Images and images are not same things.
On ionic serve or in browser
IMAGE.JPG is similar to image.jpg
but in mobile these are two different things.

2 Likes
19

After some searches, this works for me :slight_smile:

20

this work for me
i tried everything but finally
change my img path
from
…/…/assets
to
./assets
and it work for both device and browser

2 Likes