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:
.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.
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:
verify that tags with relative src actually works in ionic
provide a working example that I could then use to figure out what’s going on
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:
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.
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.
