1
我正在使用AngularJS从JSON文件读取图像数据，该图像数据适用于除图像以外的其他数据。 ng-src没有获取任何图像？来自JSON文件的AngularJS图像不会使用ng-src加载如何显示图像
我需要将所有图像加载到div并填充使用ng-repeat读取的图像数据的src，alt和title属性，但它不起作用。发生什么事？
然后，我不确定代码安装的方式是如何工作的？
这是我的代码 -
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body ng-controller = "storeController">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!--<button class="btn btn-primary" ng-click="showMessage = !showMessage">Toggle Message</button>
<h2 ng-show="showMessage == true">Secret Message</h2>
<input type="text" placeholder="Leave a Message" ng-model="message">
<h2>{{ message }}</h2>-->
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">ngPlaces</a>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-4" ng-repeat = "place in places">
<div class="thumbnail">
<img ng-src="images/{{cribs.image}}.jpg" alt="">
<div class="caption">
<h3>{{place.address}}</h3>
<p><strong>Type:</strong>{{place.type}}</p>
<p><strong>Description:</strong>{{place.description}}</p>
<p><strong>Price:</strong>{{place.price | currency}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
的json数据
[
{
"id": 1,
"type": "Condo",
"price": 220000,
"address": "213 Grove Street",
"description": "Excellent place, really nice view!",
"details": {
"bedrooms": 2,
"bathrooms": 1.5,
"area": 921
},
"image":"crib-1"
},
{
"id": 2,
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for a large family.",
"details": {
"bedrooms": 4,
"bathrooms": 3,
"area": 2145
},
"image":"crib-2"
},
{
"id": 3,
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighbourhood and lot's of nice green space.",
"details": {
"bedrooms": 3,
"bathrooms": 2.5,
"area": 1500
},
"image":"crib-3"
},
{
"id": 4,
"type": "House",
"price": 755990,
"address": "7807 Forest Avenue",
"description": "Best house on the block!",
"details": {
"bedrooms": 6,
"bathrooms": 4.5,
"area": 3230
},
"image":"crib-4"
},
{
"id": 5,
"type": "Condo",
"price": 210500,
"address": "1857 Andover Court",
"description": "Nice little condo with room to grow.",
"details": {
"bedrooms": 2,
"bathrooms": 1.5,
"area": 1023
},
"image":"crib-5"
},
{
"id": 6,
"type": "House",
"price": 334900,
"address": "7398 East Avenue",
"description": "You'll love the view!",
"details": {
"bedrooms": 4,
"bathrooms": 2.5,
"area": 1788
},
"image":"crib-6"
}
]
app.js
(function(){
var app = angular.module('store', []);
app.controller('storeController', function($scope, placesFactory){
$scope.places;
placesFactory.getPlaces().then(function(response){
$scope.places = response.data;
});
$scope.sayHello = function(){
console.log("Hello");
}
});
app.factory('placesFactory', function($http){
function getPlaces(){
return $http.get('data.json');
}
return {
getPlaces: getPlaces
}
});
})();
您是否尝试过寻找的源/网络选项卡中的铬调试器。您应该了解图像未加载的原因，例如您可能没有按照它应该构建的网址。检查网络标签，你应该看到那里的404。 – moplin