前言
在日常開(kāi)發(fā)工作中，有很多需求是在一個(gè)頁(yè)面上顯示一些圖片。有時(shí)，圖片的地址路徑是由客戶端的腳本來(lái)設(shè)置（它有可能是從數(shù)據(jù)庫(kù)中獲取的）。
這是Angularjs的時(shí)代，當(dāng)我們想使用Angularjs來(lái)實(shí)現(xiàn)在頁(yè)面中展示圖片，我們會(huì)簡(jiǎn)單使用： <img src=”path of image”>.
如果我們只考慮展示，毫無(wú)疑問(wèn)它沒(méi)問(wèn)題，但是在瀏覽器的控制臺(tái)中會(huì)顯示一個(gè) 404 (not found) 錯(cuò)誤。
為了解決這個(gè)問(wèn)題，我們需要使用ng-Src。在使用 ng-Src之前，我想給你重現(xiàn)一下這個(gè)錯(cuò)誤是如何產(chǎn)生的
示例代碼如下：
示例源碼
Script.js
var testApp = angular .module("testModule", []) .controller("testController", function ($scope) { var animal = { name: "CAT", color: "White", picture: "/images/cat.jpg", }; $scope.animal = animal; }); Index.html
<html ng-app="testModule"> <head> <title></title> <script src="scripts/angular.min.js"></script> <script src="scripts/js/script.js"></script> </head> <body> <div ng-controller="testController"> Name: {{animal.name}} <br /> Color: {{animal.color}} <br /> <img src="{{animal.picture}}" /> </div> </body> </html> 在上述例子 中，有一個(gè) animal 類，它擁有三個(gè)屬性： Name, Color 和Picture，且已經(jīng)賦值了。使用模型綁定器，在頁(yè)面上我使用了這些屬性。 對(duì)于圖片，我使用了 <img> HTML標(biāo)簽 。
然后運(yùn)行這個(gè)示例，效果如下：
然后打開(kāi)瀏覽器的控制臺(tái)，就會(huì)看到這個(gè)錯(cuò)誤。
無(wú)法加載資源:服務(wù)器響應(yīng)狀態(tài)為404 (Not Found)。
那么問(wèn)題來(lái)了，為什么會(huì)出現(xiàn)這個(gè)錯(cuò)誤？應(yīng)該如何解決？
原因- 當(dāng)DOM 被解析時(shí)，會(huì)嘗試從服務(wù)器獲取圖片。 這時(shí)，src屬性上的 Angularjs 綁定表達(dá)式 {{ model }}還沒(méi)有執(zhí)行，所以就出現(xiàn)了 404 未找到的錯(cuò)誤。
解決方案- 解決的版本就是：在圖片中使用ng-Src代替src屬性，使用這個(gè)指令后，請(qǐng)求就只會(huì)在Angular執(zhí)行這個(gè)綁定表達(dá)式之后才會(huì)發(fā)出。
使用ng-Src的示例如下：
<html ng-app="testModule"> <head> <title></title> <script src="scripts/angular.min.js"></script> <script src="scripts/js/script.js"></script> </head> <body> <div ng-controller="testController"> Name: {{animal.name}} <br /> Color: {{animal.color}} <br /> <img ng-src="{{animal.picture}}" /> </div> </body> </html> 現(xiàn)在你再打開(kāi)瀏覽器的控制臺(tái)，就不會(huì)出現(xiàn)：404 未找到， 這是因?yàn)槭褂昧?code>ng-Src 。
定義
ng-Src- 這個(gè)指令覆蓋了<img />元素的src原生屬性。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容，希望大家能夠喜歡，如果有疑問(wèn)可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
