all img tag use ng-src, to avoid extra wrong image requests to server

Author: Bruce Lee

how-to-build-chat-app-with-socket.io-and-angular/examples/chapter02/TechNode/static/index.html

@@ -24,7 +24,7 @@
         <nav class="collapse navbar-collapse" role="navigation">
           <ul class="nav navbar-nav navbar-right" ng-show="me">
             <li>
-              <img src="{{me.avatarUrl}}" title="{{me.name}}" class="img-rounded"/>
+              <img ng-src="{{me.avatarUrl}}" title="{{me.name}}" class="img-rounded"/>
             </li>
             <li>
               <a href="" ng-click="logout()">Log out</a>

how-to-build-chat-app-with-socket.io-and-angular/examples/chapter02/TechNode/static/pages/room.html

@@ -4,7 +4,7 @@
     <div class="panel-body room-content">
       <div class="list-group messages" auto-scroll-to-bottom>
         <div class="list-group-item message" ng-repeat="message in technode.messages">
-          <img src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
+          <img ng-src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
         </div>
       </div>
       <form class="message-creator" ng-controller="MessageCreatorCtrl">
@@ -21,7 +21,7 @@
     <div class="panel-body user-list-content">
       <div class="list-group users">
         <div class="list-group-item user" ng-repeat="user in technode.users">
-          <img src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
+          <img ng-src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
         </div>
       </div>
     </div>

how-to-build-chat-app-with-socket.io-and-angular/examples/chapter03/TechNode/static/index.html

@@ -31,7 +31,7 @@
           </ul>
           <ul class="nav navbar-nav navbar-right" ng-show="me">
             <li>
-              <img src="{{me.avatarUrl}}" title="{{me.name}}" class="img-rounded"/>
+              <img ng-src="{{me.avatarUrl}}" title="{{me.name}}" class="img-rounded"/>
             </li>
             <li>
               <a href="" ng-click="logout()">登出</a>

how-to-build-chat-app-with-socket.io-and-angular/examples/chapter03/TechNode/static/pages/room.html

@@ -4,7 +4,7 @@
     <div class="panel-body room-content">
       <div class="list-group messages" auto-scroll-to-bottom>
         <div class="list-group-item message" ng-repeat="message in room.messages">
-          <img src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
+          <img ng-src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
         </div>
       </div>
       <form class="message-creator" ng-controller="MessageCreatorCtrl">
@@ -21,7 +21,7 @@
     <div class="panel-body user-list-content">
       <div class="list-group users">
         <div class="list-group-item user" ng-repeat="user in room.users">
-          <img src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
+          <img ng-src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
         </div>
       </div>
     </div>

how-to-build-chat-app-with-socket.io-and-angular/examples/chapter03/TechNode/static/pages/rooms.html

@@ -15,7 +15,7 @@
         <h3>{{room.name}}<span class="badge pull-right">{{room.users.length}}人</span></h3>
         <div class="avatar-list">
             <span ng-repeat="user in room.users" title="{{user.name}}">
-              <img alt="{{user.email}}" src="{{user.avatarUrl}}" class="img-rounded"/>
+              <img alt="{{user.email}}" ng-src="{{user.avatarUrl}}" class="img-rounded"/>
             </span>
         </div>
       </div>

how-to-build-chat-app-with-socket.io-and-angular/examples/chapter04/TechNode/static/index.html

@@ -25,7 +25,7 @@
           </ul>
           <ul class="nav navbar-nav navbar-right" ng-show="me._id">
             <li>
-              <img src="{{me.avatarUrl}}" title="{{me.name}}" class="img-rounded"/>
+              <img ng-src="{{me.avatarUrl}}" title="{{me.name}}" class="img-rounded"/>
             </li>
             <li>
               <a href="" ng-click="logout()">登出</a>

how-to-build-chat-app-with-socket.io-and-angular/examples/chapter04/TechNode/static/pages/room.html

@@ -4,7 +4,7 @@
     <div class="panel-body room-content">
       <div class="list-group messages" auto-scroll-to-bottom>
         <div class="list-group-item message" ng-repeat="message in room.messages">
-          <img src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
+          <img ng-src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
         </div>
       </div>
       <form class="message-creator" ng-controller="MessageCreatorCtrl">
@@ -21,7 +21,7 @@
     <div class="panel-body user-list-content">
       <div class="list-group users">
         <div class="list-group-item user" ng-repeat="user in room.users">
-          <img src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
+          <img ng-src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
         </div>
       </div>
     </div>

how-to-build-chat-app-with-socket.io-and-angular/examples/chapter04/TechNode/static/pages/rooms.html

@@ -15,7 +15,7 @@
         <h3>{{room.name}}<span class="badge pull-right">{{room.users.length}}人</span></h3>
         <div class="avatar-list">
             <span ng-repeat="user in room.users" title="{{user.name}}">
-              <img alt="{{user.email}}" src="{{user.avatarUrl}}" class="img-rounded"/>
+              <img alt="{{user.email}}" ng-src="{{user.avatarUrl}}" class="img-rounded"/>
             </span>
         </div>
       </div>

static/pages/room.html

@@ -4,7 +4,7 @@
     <div class="panel-body room-content">
       <div class="list-group messages" auto-scroll-to-bottom>
         <div class="list-group-item message" ng-repeat="message in room.messages">
-          <img src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
+          <img ng-src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
         </div>
       </div>
       <form class="message-creator" ng-controller="MessageCreatorCtrl">
@@ -21,7 +21,7 @@
     <div class="panel-body user-list-content">
       <div class="list-group users">
         <div class="list-group-item user" ng-repeat="user in room.users">
-          <img src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
+          <img ng-src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
         </div>
       </div>
     </div>