Когда я перехожу прямо в каталог через браузер, другими словами localhost: 8888/images/mansion-1.jpg, изображение появляется в браузере, но на консоли он говорит 404, он не может найти изображения. Может ли кто-нибудь помочь мне разобраться, почему он не может получить изображения?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ng-mansions</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body ng-app="ngMansions" ng-controller="mansionsController">
<!--Nav Bar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">mc-mansions</a>
</div>
</div>
</nav>
<!--Real Estate Listings-->
<div class="container">
<div class="col-sm-4" ng-repeat="mansion in mansions">
<div class="thumbnail">
<img ng-src="images/{{mansion.image}}.jpg" alt="">
<div class="caption">
<h3>{{mansion.address}}</h3>
<p><strong>Type: </strong>{{mansion.type}}</p>
<p><strong>Description: </strong>{{mansion.description}}</p>
<p><strong>Price: </strong>{{mansion.price | currency}}</p>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
<script src="scripts/mansionsController.js"></script>
<script src="scripts/mansionsFactory.js"></script>
</html>
Поскольку он говорит {{mansion.image}}, фактические файлы jpg также должны быть уникальными, mansion-1.jpg, а не mansions-1.jpg. Эти детали действительно меня достают.
Может быть, вы должны изменить это
{{mansion.image}}
Для того, чтобы:
"+ {{mansion.image}} +"