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执行这个绑定表达式之后才会发出。