詳解AngularJS中ng-src指令的使用
前言
在日常開發(fā)工作中，有很多需求是在一個頁面上顯示一些圖片。有時，圖片的地址路徑是由客戶端的腳本來設置（它有可能是從數(shù)據(jù)庫中獲取的）。
這是Angularjs的時代，當我們想使用Angularjs來實現(xiàn)在頁面中展示圖片，我們會簡單使用： <img src=”path of image”>.
如果我們只考慮展示，毫無疑問它沒問題，但是在瀏覽器的控制臺中會顯示一個 404 (not found) 錯誤。
為了解決這個問題，我們需要使用ng-Src。在使用 ng-Src之前，我想給你重現(xiàn)一下這個錯誤是如何產(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>
在上述例子 中，有一個 animal 類，它擁有三個屬性： Name, Color 和Picture，且已經(jīng)賦值了。使用模型綁定器，在頁面上我使用了這些屬性。 對于圖片，我使用了 <img> HTML標簽 。
然后運行這個示例，效果如下：
然后打開瀏覽器的控制臺，就會看到這個錯誤。
無法加載資源:服務器響應狀態(tài)為404 (Not Found)。
那么問題來了，為什么會出現(xiàn)這個錯誤？應該如何解決？
原因- 當DOM 被解析時，會嘗試從服務器獲取圖片。 這時，src屬性上的 Angularjs 綁定表達式 {{ model }}還沒有執(zhí)行，所以就出現(xiàn)了 404 未找到的錯誤。
解決方案- 解決的版本就是：在圖片中使用ng-Src代替src屬性，使用這個指令后，請求就只會在Angular執(zhí)行這個綁定表達式之后才會發(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)在你再打開瀏覽器的控制臺，就不會出現(xiàn)：404 未找到， 這是因為使用了ng-Src 。
定義
ng-Src- 這個指令覆蓋了<img />元素的src原生屬性。
總結(jié)
以上就是這篇文章的全部內(nèi)容，希望大家能夠喜歡，如果有疑問可以留言交流。
相關文章
這篇文章主要介紹了AngularJS API之equal比較對象的相關資料,需要的朋友可以參考下2016-09-09
AngularJS實現(xiàn)DOM元素的顯示與隱藏功能
這篇文章主要介紹了AngularJS實現(xiàn)DOM元素的顯示與隱藏功能,涉及AngularJS中ng-hide與ng-show兩個屬性的使用,需要的朋友可以參考下2016-11-11
大家在使用angularjs的時候，很容易忽略AngularJS自帶指令的作用域問題，有一些指令會產(chǎn)生獨立的自己作用域，造成子級無法與父級作用域雙向綁定的問題。下面我們來看看這些問題，有需要的可以參考借鑒。2016-09-09
Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法，非常具有實用價值，需要的朋友可以參考下2017-09-09
本文給大家介紹ANGULARJS中使用JQUERY分頁控件，需要的朋友可以參考下2015-09-09
現(xiàn)實世界千變?nèi)f化,區(qū)區(qū)幾種內(nèi)置指令不可能滿足所有的需求,下面這篇文章主要給大家介紹了關于Angular自定義指令Tooltip的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
詳解創(chuàng)建自定義的Angular Schematics
本文對 Angular Schematics 進行了介紹，并創(chuàng)建了一個用于創(chuàng)建自定義 Component 的 Schematics ，然后在 Angular 項目中以它為模板演練了通過 Schematics 添加自定義的 Component，感興趣的小伙伴們可以參考一下2018-06-06
Angularjs 實現(xiàn)動態(tài)添加控件功能
這篇文章主要介紹了Angularjs 實現(xiàn)動態(tài)添加控件功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
本文主要介紹AngularGauge 屬性的知識，這里這里了詳細的資料來介紹AngularGauge屬性的內(nèi)容知識，幫助大家學習參考，有需要的小伙伴可以參考下2016-09-09
這篇文章主要介紹了淺談ng-zorro使用心得，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12