详解AngularJS中ng-src指令的使用
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
详解AngularJS中ng-src指令的使⽤
前⾔
在⽇常开发⼯作中，有很多需求是在⼀个页⾯上显⽰⼀些图⽚。
有时，图⽚的地址路径是由客户端的脚本来设置（它有可能是从数据库中获取的）。
这是Angularjs的时代，当我们想使⽤Angularjs来实现在页⾯中展⽰图⽚，我们会简单使⽤：<img src=”path of image”>.
如果我们只考虑展⽰，毫⽆疑问它没问题，但是在浏览器的控制台中会显⽰⼀个 404 (not found) 错误。
为了解决这个问题，我们需要使⽤ng-Src。
在使⽤ng-Src之前，我想给你重现⼀下这个错误是如何产⽣的
⽰例代码如下：
⽰例源码
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: {{}}
<br />
Color: {{animal.color}}
<br />
<img src="{{animal.picture}}" />
</div>
</body>
</html>
在上述例⼦中，有⼀个animal 类，它拥有三个属性：Name, Color 和Picture，且已经赋值了。
使⽤模型绑定器，在页⾯上我使⽤了这些属性。
对于图⽚，我使⽤了 <img> HTML标签。
然后运⾏这个⽰例，效果如下：
然后打开浏览器的控制台，就会看到这个错误。
⽆法加载资源:服务器响应状态为404 (Not Found)。
那么问题来了，为什么会出现这个错误？应该如何解决？
原因- 当DOM 被解析时，会尝试从服务器获取图⽚。
这时，src属性上的 Angularjs 绑定表达式 {{ model }}还没有执⾏，所以就出现了 404 未找到的错误。
解决⽅案- 解决的版本就是：在图⽚中使⽤ng-Src代替src属性，使⽤这个指令后，请求就只会在Angular执⾏这个绑定表达式之
后才会发出。
使⽤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: {{}}
<br />
Color: {{animal.color}}
<br />
<img ng-src="{{animal.picture}}" />
</div>
</body>
</html>
现在你再打开浏览器的控制台，就不会出现：404 未找到，这是因为使⽤了ng-Src 。
定义
ng-Src- 这个指令覆盖了<img />元素的src原⽣属性。
总结
以上就是这篇⽂章的全部内容，希望⼤家能够喜欢，如果有疑问可以留⾔交流。