Why can't my program find the images?

Question

When I go straight into the directory via the browser, in other words localhost:8888/images/mansion-1.jpg, the image appears on the browser, but on the console, it says 404, it can't find the images. Can anybody assist me in figuring out why it cant retrieve the images?

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

Answer 1

Maybe you must change this

{{mansion.image}}

To:

"+ {{mansion.image}} +"

Answer 2

Since it says {{mansion.image}} the actual jpg files have to be singular as well, mansion-1.jpg and not mansions-1.jpg. These details really get me.

Why can't my program find the images?

Question

2 answers

solution1
0 2015-10-28 18:31:20

solution2
0 ACCPTED 2015-10-28 19:01:13

Why can't my program find the images?

Question

2 answers

solution1 0 2015-10-28 18:31:20

solution2 0 ACCPTED 2015-10-28 19:01:13

solution1
0 2015-10-28 18:31:20

solution2
0 ACCPTED 2015-10-28 19:01:13