All images in app are broken / not showing?


#1

Now that I’m testing the app in the iPad, I’m seeing that all images are not showing up. (same in the iOS simulator)

I don’t have any idea where to begin troubleshooting this, as all the images are good when I’m testing in Chrome / Safari. Any guidance would be awesome. Thanks!


#2

Are you referencing images that are included in your app? Or are you trying to access images on the web? Are you using relative paths for local images?


#3

Included in my app. I’m using src="…/img/backtomap.jpg" for example… so do I need to modify that somehow?

Setting src to “/www/img/backtomap.jpg” doesn’t work either


#4

Sounds like it would be something iOS specific… Maybe someone with experience on the iOS platform could give more clarity.

I could only imagine that there might be typo’s in lowercase/uppercase characters or the likes, it might be that desktop browsers are more forgiving or anything.

Sorry I can’t be of any help at the moment.


Problem with iOS
#5

Hey there

So the thing to remember is that when ever you set their paths relative to index.html

so src="../img/backtomap.jpg"

should be src="img/backtomap.jpg"


Path File of Images browser / android
#6

That did the trick! Thank you :slight_smile:


#7

Any thoughts on why it worked in different browsers? I thought about this possibility but assumed it was correct because other browsers managed to do it.


#8

I think it’s probably because the images were being referenced in the HTML of my tabs pages (i.e. tab-map.html) which live in /www/templates, so there must have been a difference when serving the app in Chrome/Safari vs. actually building the app with regard to where the app thinks its “location” is. That could probably be worded a lot better than how I just attempted to say it :slight_smile:

Before, I had to jump out of the templates folder to get into the img folder, “…/img/pic.jpg” because when it was being served, it recognized its current state as being in the templates folder. Whereas once it’s built, it recognizes itself as root.

That’s my guess.


#9

Strangely, all links to the images still work when serving and viewing in Chrome/Safari after I changed the references to “img/pic.jpg”, so I don’t know.


#10

It should work the same actually, angularjs dynamically inject your template into the index.html, so the references should be equal for all platforms. That’s why I’m a bit startled why it was working before =P