上节中，我们使用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就可以了。