All images in app are broken / not showing?

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!

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?

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

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.

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"

2 Likes

That did the trick! Thank you :slight_smile:

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.

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.

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.

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