2014年3月11日 星期二

[Javascript] AngularJS 與 img src & img ng-src

用 AngularJS 在處理 img 時,沒看手冊的用法:

<img src="{{item.url}}" />

雖然網頁顯示一切正常,但仔細看 Google Chrome 開發人員工具時,發現有奇怪的 requests 發出去,是的,發出去的資料就是 http://hostname/%7B%7Bitem.url%7D%7D ,解法就是改用 ng-src 吧!

<img ng-src="{{item.url}}" />

AngularJS 官方文件 ngSrc :

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

沒有留言:

張貼留言