AngularJS 设置img (ng-src 和 src 区别)

前端之家收集整理的这篇文章主要介绍了AngularJS 设置img (ng-src 和 src 区别)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AngularJS 使用ng-src替换了src:

<img ng-src="{{imageUrl}}">
  • 1

错误写法:

<img src="http://www.coderlady.com/avatar/{{hash}}"/>
  • 1

正确写法

<img ng-src="http://www.coderlady.com/avatar/{{hash}}"/>
  • 1

这是因为在加载页面的时候,在Angular加载完成之前,浏览器会试图从http://www.coderlady.com/avatar/{{hash}}加载图片,当然这会失败.一旦Angular加载完成以后,浏览器就会明白{{hash}}变量需要被具体值代替,比如logo.png.然后就会到正确的http://www.coderlady.com/avatar/logo.png去加载图片. 这显然就要执行两次操作.
ng-src解决了这个问题,因为它会等Angular加载完成以后,才会到正确的地址去加载数据.

猜你在找的Angularjs相关文章