AngularJS添加图片链接

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

如果我们仅仅用一个正常src属性来进行绑定（<img class="diagram" src="{{phone.imageUrl}}">），这个表达式被放入src的话，最终得到的图片URL为：http://localhost:8000/app/{{phone.imageUrl}}。这是因为浏览器会把AngularJS的{{ 表达式 }}标记直接进行字面解释，并且发起一个向非法的请求。

棒棒的AngularJS为我们提供了ngSrc命令（对应ng-src属性），有了这个ngSrc指令会避免产生这种情况，使用ngSrc指令防止浏览器产生一个指向非法地址的请求。

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

赶快试试吧

转载于:https://www.cnblogs.com/LisaY/p/5892997.html