本教程演示了使用指令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ù)器訪問日志，確認(rèn)該應(yīng)用確實(shí)確實(shí)向/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貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
<img ng-src="{{phone.imageUrl}}">
這會給您預(yù)期的結(jié)果，因?yàn)閜hone.imageUrl在加載角度后會對其進(jìn)行評估并替換為其值。
<img src="{{phone.imageUrl}}">
但與此同時(shí)，瀏覽器嘗試加載名為的圖像{{phone.imageUrl}}，從而導(dǎo)致請求失敗。您可以在瀏覽器的控制臺中進(jìn)行檢查。
海綿寶寶撒
TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊
該src="{{phone.imageUrl}}"是不必要的，并創(chuàng)建瀏覽器的額外要求。瀏覽器將至少發(fā)出2個(gè)GET嘗試加載該圖像的請求：
在計(jì)算表達(dá)式之前 {{phone.imageUrl}}
表達(dá)式求值后 img/phones/motorola-xoom.0.jpg
ng-src處理Angular表達(dá)式時(shí)，應(yīng)始終使用指令。<img ng-src="{{phone.imageUrl}}">為您提供單個(gè)請求的預(yù)期結(jié)果。
順便說一句，這同樣適用于ng-href您，直到第一個(gè)摘要循環(huán)開始之前您都不會斷開鏈接。
- 3 回答
- 0 關(guān)注
- 1036 瀏覽
添加回答
舉報(bào)
0/150
提交
取消