本帖子已过去太久远了，不再提供回复功能。AngularJS中ng-Src指令替代src 解决console的url请求404错误 - CSDN博客
AngularJS中ng-Src指令替代src 解决console的url请求404错误
在日常开发工作中，有很多需求是在一个页面上显示一些图片。有时，图片的地址路径是由客户端的脚本来设置（它有可能是从数据库中获取的）。
这是Angularjs的时代，当我们想使用Angularjs来实现在页面中展示图片，我们会简单使用：&&img
src=”path of image”&.
如果我们只考虑展示，毫无疑问它没问题，但是在浏览器的控制台中会显示一个 404 (not found) 错误。
为了解决这个问题，我们需要使用ng-Src。在使用&ng-Src之前，我想给你重现一下这个错误是如何产生的
示例代码如下：
testApp = angular
&&&&&&&&.module(&testModule&,
&&&&&&&&.controller(&testController&,
($scope) {
&&&&&&&&&&var
animal = {
&&&&&&&&&&&&name:
&&&&&&&&&&&&color:
&&&&&&&&&&&&picture:
&/images/cat.jpg&,
&&&&&&&&&&};
&&&&&&&&&&$scope.animal
&&&&&&&&});
Index.html
ng-app=&testModule&&
&&&title&&/title&
src=&scripts/angular.min.js&&&/script&
src=&scripts/js/script.js&&&/script&
ng-controller=&testController&&
{{animal.name}}
&&&&Color:
{{animal.color}}
src=&{{animal.picture}}&
在上述例子 中，有一个&animal&类，它拥有三个属性：&Name,&Color&和Picture，且已经赋值了。使用模型绑定器，在页面上我使用了这些属性。
对于图片，我使用了&&img&&HTML标签
然后运行这个示例，效果如下：
然后打开浏览器的控制台，就会看到这个错误。
无法加载资源:服务器响应状态为404 (Not Found)。
那么问题来了，为什么会出现这个错误？应该如何解决？&
原因-&当DOM 被解析时，会尝试从服务器获取图片。 这时，src属性上的
Angularjs 绑定表达式&{{
model }}还没有执行，所以就出现了& 404 未找到的错误。
解决方案-&解决的版本就是：在图片中使用ng-Src代替src属性，使用这个指令后，请求就只会在Angular执行这个绑定表达式之后才会发出。
使用ng-Src的示例如下：
ng-app=&testModule&&
&&&title&&/title&
src=&scripts/angular.min.js&&&/script&
src=&scripts/js/script.js&&&/script&
ng-controller=&testController&&
{{animal.name}}
&&&&Color:
{{animal.color}}
ng-src=&{{animal.picture}}&
现在你再打开浏览器的控制台，就不会出现：404 未找到， 这是因为使用了ng-Src&。
ng-Src-&这个指令覆盖了&img
/&元素的src原生属性。
本文已收录于以下专栏：
相关文章推荐
今天调一个页面，碰巧开着console，偶然发现发起了无效的http请求，提示404错误
虽然不影响功能，还是检查了一下，发现是因为有类似下面的代码：
所以，在angular实际渲染完成之前，...
AngularJS 使用 ng-src
替换了src :错误写法:正确写法这是因为在加载页面的时候, 在Angular加载完成之...
服务器环境: nginxangularjs自带路由功能，当通过路由跳转的新页面时，由于目录下并不存在该页面对应的静态文件，所以此时执行刷新页面，会报404的错误。进一步讲，原因是在刷新请求页面时，ng...
index.html 从此界面跳转到a.html界面
一款app使用前端框架angularjs开发，需要支持web端和pc客户端，使用nw.js封装网页在电脑上运行。
出现了一个问题是在web端图片都能正常显示，但是在nw环境下无法显示。
Angular 应用程序以及 Angular 本身都依赖于很多第三方包 ( 包括 Angular 自己 ) 提供的特性和功能。这些包由 Node 包管理器 (npm) 负责安装和维护。
在用spring mvc提供的拦截器做登录拦截的时候，我们经常需要编写自定义的登录拦截器，经常会发现拦截器无法使用或者是exclude-mapping无法起作用，总是被拦截，其原因主要是由于静态资源文...
angularJs 使用H5 里面的video视频标签 路径正确但展现不出来的
书海拾贝之特殊的ng-src和ng-href
在说明这两个指令的特殊之前，需要先了解一下ng的启动及执行过程，如下：
1) 浏览器加载静态HTML文件并解析为DOM；
//Get object of URL parametersvar
allVars = $.getUrlVars();
// Getting URL var by its namvar ...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)2013年3月 Web 开发大版内专家分月排行榜第三
2013年3月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。}