上節中，我們使用XHR，確切的說是$http，模擬從服務端請求了json數據。 本節，讓我們給每個手機添加一個縮略圖。 如果你足夠細心，相信在看到上節我們為你準備好的數據的時候，一定會發現，多了一個id和imageUrl：  再觀察imageUrl字段的值，發現其是一個相對路徑。我們說是相對于哪個文件呢？如果你還記得我們在模塊中的路徑設計，那么相信你一定不會陌生。在模塊中的路徑是相對于index.html的。同樣，這個路徑也是如此。 我們為你準備了json文件的同時，還為你準備好了圖像文件。 地址如下：http://guide.mengyunzhi.com/angular-phonecat/app/img/phones.zip 下載后，解壓至img/phones文件夾。 `img/phones` ~~~~ ├── img │?? └── phones ├── index.html ~~~ 解壓后，phones文件夾中會多出如下這些文件： ~~~ ├── dell-streak-7.0.jpg ├── dell-streak-7.1.jpg ├── dell-streak-7.2.jpg ├── dell-streak-7.3.jpg ├── dell-streak-7.4.jpg ├── dell-venue.0.jpg ├── dell-venue.1.jpg ├── dell-venue.2.jpg ... ~~~ ## 添加縮略圖片 下面，我們改寫模板文件。 `yun-zhi/phone-list.template.html` ~~~ <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail"> <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" class="thumb"/> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> ~~~ 測試：  在這里，我們使用了一個叫做ng-src的屬性代替了src屬性。在angularjs的世界里，我們將完全使用ng-src代替src。在一般情況下，ng-src 和 src 沒有任何區別。但在圖片未正確獲取時就不一樣了。這個問題，我們可以google: ng-src vs src，然后你將很輕松的定位到以下鏈接： http://stackoverflow.com/questions/27554765/use-of-ng-src-vs-src 。 兩者有什么區別呢? 簡單來說，使用ng-src會等頁面加載后，再去加載圖片文件。這樣用戶的瀏覽感受更好。如果你不太清楚，那么只需要記住使用ng-src就可以了。