本教程演示了使用指令ngSrc代替src：<ul class="phones"> <li ng-repeat="phone in phones" class="thumbnail"> <img ng-src="{{phone.imageUrl}}"> </li></ul>他們要求：用普通的舊src屬性替換ng-src指令。使用諸如Firebug或Chrome的Web檢查器之類的工具，或檢查網(wǎng)絡(luò)服務(wù)器訪問日志，確認該應(yīng)用確實確實向/app/%7B%7Bphone.imageUrl%7D%7D（或 / app / {{phone .imageUrl}}）。我這樣做了，它給了我正確的結(jié)果：<li class="thumbnail ng-scope" ng-repeat="phone in phones"> <img src="img/phones/motorola-xoom.0.jpg"></li>有什么理由嗎？
3 回答
互換的青春
TA貢獻1797條經(jīng)驗 獲得超6個贊
<img ng-src="{{phone.imageUrl}}">
這會給您預(yù)期的結(jié)果，因為phone.imageUrl在加載角度后會對其進行評估并替換為其值。
<img src="{{phone.imageUrl}}">
但與此同時，瀏覽器嘗試加載名為的圖像{{phone.imageUrl}}，從而導(dǎo)致請求失敗。您可以在瀏覽器的控制臺中進行檢查。
慕斯709654
TA貢獻1840條經(jīng)驗 獲得超5個贊
該src="{{phone.imageUrl}}"是不必要的，并創(chuàng)建瀏覽器的額外要求。瀏覽器將至少發(fā)出2個GET嘗試加載該圖像的請求：
在計算表達式之前 {{phone.imageUrl}}
表達式求值后 img/phones/motorola-xoom.0.jpg
ng-src處理Angular表達式時，應(yīng)始終使用指令。<img ng-src="{{phone.imageUrl}}">為您提供單個請求的預(yù)期結(jié)果。
順便說一句，這同樣適用于ng-href您，直到第一個摘要循環(huán)開始之前您都不會斷開鏈接。
- 3 回答
- 0 關(guān)注
- 897 瀏覽
添加回答
舉報
0/150
提交
取消