圖片初始化報錯404的異常
瀏覽器解析html的順序:
1) 瀏覽器載入靜態HTML檔案並解析為DOM；
2) 瀏覽器載入angular.js檔案；
3) angular監聽 DOMContentLoaded 事件，監聽到時開始啟動；
4) angular尋找ng-app指令，確定作用範圍；
5) 找到app中定義的Module使用$injector服務進行依賴注入；
6) 根據injector服務建立compile服務用於編譯；
7) $compile服務編譯DOM中的指令、過濾器等；
8) 使用ng-init指令，將作用域中的變數進行替換；
9) 最後生成了我們的最終檢視。
	因此,angular框架是在DOMcontent載入完畢後才開始發揮作用。假如我們模板中有一張圖片如下：
<
 
img src="{{imageUrl}}" />,瀏覽器解析HTML為DOM的時候會把src="{{imageUrl}}"原樣解析,因此會報404的錯誤

	ng-src指令的本質是先從$scope的記憶體中獲取ng-src的屬性值,再賦值給src的屬性值,因此當ng-src屬性值獲取到了url時,瀏覽器會解析為<img ng-src="url" src="url"></img>,最終其顯示圖片作用的還是src屬性
	ng-src屬性會做兩件事:
第一步:先判斷ng-src的屬性值是否為null或者空字串
第二步:如果不為null或者空字串,就會把自己的值賦值給src屬性
第三步:如果為null或者空字串,就不會把自己的值賦值給src屬性

案例
	1.<
 
img ng-src="{{imageUrl}}"></img>	       //結果都為imageUrl
	瀏覽器會解析為	<img ng-src="{{imageUrl}}" src="{{imageUrl}}"></img>	

	2.<img ng-src="{{imageUrlOne}}" src="{{imageUrlTwo}}"></img>	//結果都為imageUrlOne
	瀏覽器會解析為	 <img ng-src="{{imageUrlOne}}" src="{{imageUrlOne}}"></img
 
>	

	3.<img ng-src="" src="{{imageUrl}}"></img>	//結果都為imageUrl
	瀏覽器會解析為	 <img ng-src="" src="{{imageUrl}}"></img>	

注意:
	通常我們會使用<img ng-src="{{imageUrl}}"/>解決初始化時url報錯的問題;但是這樣有個弊端,當我們需要清空圖片資訊時,需要設定$scope.url=null或者空字串,那麼將無法影響src屬性,也就是說圖片仍然顯示清空前的圖片,但是提交無法提交上去,即:
//初始值
<img ng-src="{{imageUrl}}"/>
瀏覽器解析為:<img ng-src="{{imageUrl}}" src="{{imageUrl}}"/>
//對ng-src重新賦值為空
$scope.imageUrl="";
//結果
<img  src="{{imageUrl}}"/>