Question

我是一个新的angularjs工具。

这是我的json文件，

[
  {
   "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"
  }
]

当我运行下面的代码时，它不起作用，

<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>

但是当我从网上获取图片时，它运行正常。

我可以知道，我的代码中的错误是什么？

任何帮助都将受到高度赞赏。

谢谢，

Answer 1

错误是未加载图像的结果。应根据图像与index.html的相对位置来引用图像。由于图像与index.html位于同一目录中，因此无需文件引用。

要正确加载图像，您应该以这种方式重构JSON：

{
  "flagurl": "Flag_of_the_People's_Republic_of_China.svg"
}

Answer 2

浏览器已经停止允许以默认模式访问本地资源（不确定ie）无论如何你可以像这样“chrome.exe --allow-file-access-from-files”启动chrome来允许你这样做< / p>

如何从本地驱动器为json设置图像URL

2 个答案: