Cannot resolve image path [SOLVED]

ionic-v1
#1

So i have been trying out ionic, i was going through a tutorial to create a controller, open a JSON file and some images in controller and send the data to view. I can open the file alright (console.logged), but for some reason it cannot access the images, throws an error.

GET http://localhost:8100/img/{{item.shortname}}_tn.jpg 404 (Not Found)

Name of the image file is same as short name of person in json file, which is why {{item.shortname}}_tn.jpg is used.

angular part goes something like this

`






  <ion-content class="has-subheader" ng-controller="ListController">
    <ion-list>
      <ion-item ng-repeat='item in artists' class="item-thumbnail-left item-text-wrap">
        <img src="img/{{item.shortname}}_tn.jpg" alt="{{item.name}} Photo">
        <h2>{{item.name}}</h2>
        <h2>{{item.reknown}}</h2>
        <h2>{{item.bio}}</h2>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-pane>`

Controller is as follows

.controller('ListController',['$scope', '$http', function($scope, $http) { $http.get('js/data.json').success(function(data){ $scope.artists = data.artists; console.log(data.artists); }); }]);

I’ve tried to checkout a new project third time, and the same mistake. No luck. One more guy had a problem similar to this, but he had two different objects coming in. In my case, it says resource not found, and if i comment that line out, i get no errors, but NO output either. Ionic reads the file, dumps the data on the console, but does not print it where i want it printed (in the webpage, not the console).

I’m thinking it might be a typo, or i’m following an old tutorial and newer versions might have a different way of doing things. Can anyone give me any leads to solve this? Thanks…

  1. List item
#2

problem seemed to be lurking at the one place i did not look.
data.json file had JSON elements under a “speakers” parent, whereas in the tutorial the data did not have any parent.
so instead of
$scope.artists = data.artists;
I used
$scope.artists = data.speakers;

And Voila, up and running.

I think it might be helpful for some people in the future.

#3

Info: In angularJs use ng-src="" instead src=""