简单理解src和ng-src

作者：徐海峰

链接：https://www.zhihu.com/question/48128981/answer/109289707

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

src 是 HTML的属性，{{}} 是 ng 的表达式, 表达式可用于很多地方，包含属性，所以直接 src="{{vm.url}}" 其实就是使用ng的表达式给属性赋值，这种做法的缺点是当第一次加载模板的时候浏览器会去请求 “{{vm.url}}” 的地址，当ng编译模板后把 {{vm.url}} 替换成对应的URL后会再次请求真实的地址，所以为了避免第一次无效的请求，ng 自带了ngSrc 指令，其实和ngHref的原理类似。

想要探索为啥直接写 ng-src=“vm.url” 不行就需要看文档或者源码：
angular.js/attrs.js at master · angular/angular.js · GitHub

因为 ng-src 指令是直接 $observe 'ng-src' 的，所以必须是表达式，如果写成 `ng-src=“vm.url”` 指令会生成 src=“vm.url”

attr.$observe('ng-src',function(value){
attr.$set(name, value);
})

如果想要支持，把ngSrc指令改成下面这样就可以了

scope.$watch(attr[normalized], function(value) {
...
});

知道原理后如果你就不想多写{{}} 那就自定义指令 xxxSrc 改造下就可以了。

简单的说：

1、资源url是个常量，那么就用src，没毛病；

2、资源url是个（包含）变量，那么就用ng-src + {{}}，可以规避第一次请求404的问题。