Augular中 src和ng-src的区别

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




错误写法：


<iframe frameborder="0" width="800" height="560" scrolling="no" style="margin:0 auto;display: block;" src="{{picsDetail.masUrl}}"></iframe>

正确写法：


<iframe frameborder="0" width="800" height="560" scrolling="no" style="margin:0 auto;display: block;"


ng-src="{{picsDetail.masUrl}}"></iframe>








问题：IFrame加载视频块有时报404错误！


原因：当DOM 被解析时，会尝试从服务器获取图片。 这时，src属性上的 Angularjs 绑定表达式 {{ model }}还没有执行，所以就出现了  404 未找到的错误。

解决方案：解决的版本就是：在图片中使用ng-Src代替src属性，使用这个指令后，请求就只会在Angular执行这个绑定表达式之后才会发出。