Angular.js：圖片無法加載

Question

更新：它可以在Firefox中使用，但不能在Chrome中使用！ 有任何想法嗎？？？

我正在遵循一個教程，該教程創建帶有縮略圖的智能手機/平板電腦的簡單列表。 http://docs.angularjs.org/tutorial/step_07

問題：執行完第7步后，縮略圖將不再加載。

它實際上在之前的步驟中起作用，但是我無法弄清楚自己做錯了什么。 如果我直接在URL欄中調用圖像URL，則可以使用。 但是Angular無法做到這一點。 Chrome的JavaScript控制台也沒有任何錯誤。

縮略圖位於/ app / img / phones /下 （例如/app/img/phones/dell-streak-7.0.jpg）

以下是我認為相關的文件。 如果您需要更多的Intel，請告訴我。 非常感謝！

/app/index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">

  <!-- Angular imports -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>

  <!-- My imports -->
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>

    <div ng-view></div>

</body>
</html>

/app/partials/phone-list.html

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

          Search: <input ng-model="query">
      Sort by:
      <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
      </select>

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
          <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

/app/js/app.js

'use strict';

/* App Module */
var phonecatApp = angular.module('phonecatApp', [
    'ngRoute', 
    'phonecatControllers' 
]);

phonecatApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/phones', {
                templateUrl: 'partials/phone-list.html',
                controller: 'PhoneListCtrl'
            }).
            when('/phones/:phoneId', {
                templateUrl: 'partials/phone-detail.html',
                controller: 'PhoneDetailCtrl'
            }).
            otherwise({
                redirectTo: '/phones'
            });

    }
]);

/app/js/controllers.js

'use strict';

/* Controllers */

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', 
    function ($scope, $http) {
        $http.get('phones/phones.json').success(function(data) {
            $scope.phones = data;
        })

        $scope.orderProp = 'age'
    }
]);


phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 
    function($scope, $routeParams) {
        $scope.phoneId = $routeParams.phoneId
    }
]);

Answer 1

嘗試在ng-src屬性的網址中不要使用{{}} 。

ng-src指令將表達式作為參數，因此您無需使用綁定語法{{}} 。 綁定語法基本上是一種告訴角度期望表達式的方法。

由於http://docs.angularjs.org/api/ng/directive/ngSrc上的文檔使用綁定表達式中的綁定語法，因此它們並不是絕對清晰的文檔。

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Answer 2

我找到了解決方案。

它可以按原樣在Firefox中工作，但不能在Chrome中工作。 清除瀏覽數據根本沒有幫助。 問題是由AngularJS Batarang以某種我不知道的方式引起的。

因此，我禁用了Chrome擴展程序AngularJS Batarang ，它立即起作用。

在這里查看報告： https : //github.com/angular/angularjs-batarang/issues/107

Angular.js：圖片無法加載

問題描述

2 個解決方案

解決方案1
2 2014-03-31 23:00:44

解決方案2
2 已采納 2014-03-31 23:35:12

Angular.js：圖片無法加載

問題描述

2 個解決方案

解決方案1 2 2014-03-31 23:00:44

解決方案2 2 已采納 2014-03-31 23:35:12

解決方案1
2 2014-03-31 23:00:44

解決方案2
2 已采納 2014-03-31 23:35:12