javascript - how to set image url from local drive for json -
i m new angularjs tool.
here json file,
[ { "name": "world", "population": 6916183000, "flagurl":"c:\xampp\htdocs\selva \flag_of_the_people's_republic_of_china.svg" }, { "name":"more developed regions", "population": 1240935000, "flagurl": "c:\xampp\htdocs\selva \flag_of_the_people's_republic_of_china.svg" }, { "name": "less developed regions", "population": 5675249000, "flagurl": "c:\xampp\htdocs\selva \flag_of_the_people's_republic_of_china.svg" }, { "name": "least developed countries", "population": 838807000, "flagurl": "c:\xampp\htdocs\selva \flag_of_the_people's_republic_of_china.svg" } ]
when run below code, doesn't working,
<script> var myapp=angular.module('myapp',[]); myapp.controller('myctrl', function ($scope,$http) { $http.get('flag.json').success(function(data){ $scope.countries=data; }); }); </script> <body> <div ng-controller="myctrl"> search: <input type="text" ng-model="query" /> <table> <tr> <th>country</th> <th>population</th> <th>flag</th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> <td><img src="{{country.flagurl}}" width="100"></td> </tr> </table>
but when fetch image online, works fine.
may know, mistake in code?
any highly appreciated.
thanks,
the error result of images not being loaded. images should referenced based on relative location index.html
. because images in same directory index.html
, there no need file reference.
to load images properly, should refactor json in manner:
{ "flagurl": "flag_of_the_people's_republic_of_china.svg" }
Comments
Post a Comment