Images from image tag not loading in iOS emulator


#1

Hi, I can’t get my images to show up from image tags. I also searched for the image tag keywords in the documentation but nothing came up. I’m easily able to load images from css. However, when I try to load images in html no image comes up. (However, it does work correctly in the browser.) Here is an example bit that does not show images:

<div class="people-bar">
	<div class="transparent-bar"></div>
	<ion-list class="people-bar-content" ng-controller="PeopleBarCtrl">
	    <ion-item ng-repeat="person in people" class="people-bar-item">
	        <a href="{{ person.url }}">
	        	<img class="people-bar-content-person" ng-src="{{person.image}}" />
	        </a>
	    </ion-item>
	    <ion-item class="people-bar-more people-bar-item cursor-default">+{{remaining}}</ion-item>
	</ion-list>
	<div class="people-bar-extend cursor-pointer">></div>
</div>

Here is the relevant controller:

.controller('PeopleBarCtrl', function($scope) {
var NUM_PEOPLE_IN_PEOPLE_BAR = 5;

$scope.isIOS8 = isIOS8;

$scope.people = [];
for (var i = 0; i < NUM_PEOPLE_IN_PEOPLE_BAR; i++) {
	$scope.people.push({"image": "../img/ben.jpg", "url": ""});
}

$scope.remaining = 6;
})

The file structure is exactly how it suggested (the html above is in templates/, the controller is in js/):

top level/
  scss/
  www/
      templates/
      img/
      js/

This issue could be similar to this post, but I am not using absolute urls… (And yes, these images are in the iOS platform img location as well.) I’d really appreciate any help.


Architecture for a hybrid app and multiple location testing
#2

Calculate the image Path from the index.html file & not from the templates/*. Angular is a Single Page App & everything rendered on index.html page.


#3

I am experiencing a very similar issue, and my images are all using relative paths that are relative to index.html in www. I’ve tried nearly every combination of relative paths I can think of to find the local images and nothing’s worked within the phonegap builds, though it’s easy to get working with ionic serve in the desktop browser. I’ve also tried loading images or any local assets via the Safari developer tools latching onto the iOS simulator’s browser (via $.get(‘img/test.png’) and other relative-pathed variants), all without any success.

Also note that CSS relative image URLs work fine.

The tutorial @peaton references as well as every single ionic example I’ve been able to find always uses an img with an absolute, external URL to the image, and I’ve yet to find an example of this type of (what I’d expect to be fairly basic) local image linking working with ionic.

The JS and CSS files linked to from index.html are loaded via absolute paths when inspected with the Safari web inspector, so somewhere that conversion between relative and absolute, filesystem paths is taking place, but it’s not taking place for auxillary img tags.

Could someone please:

  1. verify that tags with relative src actually works in ionic
  2. provide a working example that I could then use to figure out what’s going on

Thanks!


#4

I feel like this should be a lot easier than what I’m running into and there has to be a simple fix. Anyone have any ideas?


#5

I’m having the same issues loading images in a image tag with ng-src from amazon s3. No clue how to make it work…


Adding new assets to ionic project
#6

I had the same issue, the images would load when i was viewing it on my computer using ionic serve.

The fix for me was to change the url fom something like this:
<img ng-src="/img/picture.png" width="80">

to
<img ng-src="img/picture.png" width="80">

Just remove the / before img fixed the issue for me. Obviously this means that the root folder has index.html and the image folder img

I then tested it out on the simulator and on a android device, both instances work fine for me.


#7

Hi, I also spent a few minutes with this tricky referencing stuff but for luck found out a working solution quite quickly. I wanted to reference to www/img/bg.jpg from CSS file generated based on SCSS.

First I naturally tried to reference to the file using index-relative path img/bg.jpg, but it didn’t work at all. Then I tried /img/bg.jpg which worked in my browser (ionic serve) but it didn’t work as an app on my device (ionic run).

The path, which worked both in my browser (ionic serve) and on my phone (ionic run), was …/img/bg.jpg. So this is my ion-content block in my ionic.app.scss:

ion-content {
    padding-top: 10px;
    background: url('../img/bg.jpg');
}

#8

I have the same issue. I have tried putting the images in a variety of locations and have tried setting the src="" using every possible combination. I can successfully serve the images from all the locations and urls from ionic server however when I run it on my android device no permutation will serve the image. I am lost to why this is. I am very experienced in using angular but new to ionic and phonegap. Not sure how to proceed.

I am serving a template from the www/templates directory. The template is being injected into the index.html via the ion-nav-view.

www/
images/
logo.png
templates/
logon.html
index.html

login.html:

or

both will work via ionic serve, both fail when running on device. Any help here? Example ionic apps that serve successfully?


#9

thank you @tjflamezz - this worked really well for me


#10

@javi: have you resolved you problem for images from amazon ? I have the same problem. Thanks.

M.


#11

thank you very much!! works perfectly!


#13

Thanks Tjflamezz,
I really appreciate your help . Can you please explain what it is behaving like this?


#14

The reason it behaves like that is because adding the extra / at the start changes how the “server” (ionic serve, app build, and the phones) sees the “root” directory of your app.
Just remember to use images saved in your project with the start as img/ and not /img/
This will work.


#15

Thanks tjflamezz for info… :smile:


#16

What worked for me is “./img/blah/blah/blah.png”


#17

I discovered if we put our image inside the folder css, the images appear without problem in the ionic view and browser

.menu .scroll-content {
background: url(“fondo1.jpg”);
background-size: 100%;
}


#18

well… makes sense! Thanks! Worked fine for me.


#19

this work for me!!!
i remove ‘/’ from initial and work fine


#20

thank you. worked as well @tjflamezz


#21

i have the same problem, if i use a real device the image doesn’t load. help me please