Angularjs：圖片不會加載

更新：它適用於Firefox，但不適用於Chrome！有任何想法嗎？？？Angularjs：圖片不會加載

我正在學習一個簡單的智能手機/平板電腦列表的縮略圖。 http://docs.angularjs.org/tutorial/step_07

問題：我確實在執行步驟7，縮略圖不會再加載。

它實際上是在前面的步驟，但我無法弄清楚我做錯了什麼。如果我直接在網址欄中調用圖片網址，它就會起作用。但是Angular不知道怎麼做。我在Chrome的JavaScript控制檯中也沒有遇到任何錯誤。

縮略圖都位於/應用/ IMG /手機/（例如/app/img/phones/dell-streak-7.0.jpg）

下面是我認爲是相關的文件。如果你需要更多的英特爾，讓我知道。非常感謝！

/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 
    } 
]);

來源

2014-03-31 mitchkman

我找到了解決方案。

它在Firefox中工作，但不是在Chrome中。清除瀏覽數據根本沒有幫助。這個問題是由我不知道的某種方式造成的。

所以我有已禁用的Chrome擴展AngularJS Batarang它立即工作。

在這裏看到的報告：https://github.com/angular/angularjs-batarang/issues/107

來源

2014-03-31 23:35:12 mitchkman

如果他們解決了你的Batarang門票，我很想知道問題所在。它看起來像一個有用的工具 – BenCr

嘗試沒有圍繞在ng-src屬性url中{{}}。

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

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

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

來源

2014-03-31 23:00:44 BenCr

這是正確的。 angular中的ng-something中的任何內容已經是一個正在被角度評估和編譯的表達式。添加'{{}}'會阻止這種情況的發生 –

是的，我應該多加一點解釋。我會更新答案。 – BenCr

嗨BenCr，我試過你的解決方案：''''''但它不起作用。本教程的解決方案與我一樣（在執行步驟7之前，它已經與''{{}}''工作過了）：https：//github.com/angular/angular-phonecat/blob/step -7/app/partials/phone-list.html – mitchkman

Angularjs：圖片不會加載

回答

相關問題