AngularJS ng-src 指令詳解：防止模板表達式導致無效圖片請求

為什麼 <img src="{{url}}"> 會發出錯誤請求，而 ng-src 不會？

在 AngularJS 模板中直接使用 <img src="{{phone.imageUrl}}">，瀏覽器會在 Angular 編譯完成前**立即發起 HTTP 請求**，請求地址為字面字符串 "{{phone.imageUrl}}"，導致 404 錯誤並污染網絡日誌。ng-src 指令專門解決此問題：它**延遲設置 src 屬性**，直到表達式求值完成，確保發出的請求 URL 正確有效。

代碼對比

// ❌ 錯誤寫法：瀏覽器會請求字面 "{{phone.imageUrl}}"
<img src="{{phone.imageUrl}}" alt="{{phone.name}}" />

// ✅ 正確寫法：ng-src 等待表達式解析後再設置 src
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />

核心原理

• ngSrc 指令內部監聽表達式變化，僅在值確定後調用 element.attr('src', value)；
• 同理 ngHref 用於 <a> 標簽防止無效跳轉；
• 屬於 AngularJS **編譯階段** 與 **瀏覽器原生解析時序差異** 的經典補丁方案。

最佳實踐

1. 所有動態圖片 URL **強制使用 ng-src**；
2. 動態鏈接地址使用 ng-href；
3. 避免在 src/href 中直接寫插值表達式。