Augular中 src和ng-src的区别-白红宇

Augular中 src和ng-src的区别

阅读量：336 次

发布时间：2019-03-04

本文共 703 字，大约阅读时间需要 2 分钟。

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

转载地址：http://olne.baihongyu.com/

你可能感兴趣的文章