Question

当我通过浏览器直接进入目录时，换句话说localhost：8888 / images / mansion-1.jpg，图像出现在浏览器上，但在控制台上，它显示为404，它可以＆＃39;找到图像。任何人都可以帮我弄清楚为什么它无法找回图像？

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

也许你必须改变这个

{{mansion.image}}

要：

"+ {{mansion.image}} +"

Answer 2

因为它说{{mansion.image}}实际的jpg文件也必须是单数的，mansion-1.jpg而不是mansions-1.jpg。这些细节真的让我感动。

为什么我的程序无法找到图片？

2 个答案: