AngularJS图片img中src和ng-src的区别

半兽人 发表于: 2019-02-23   最后更新时间: 2020-03-30 22:32:44  

AngularJS在使用img引入图片的时候,使用src引入地址时,控制台报404错误,但是图片也加载出来了。这是因为在加载页面的时候, 在Angular加载完成之前,浏览器会试图从https://www.orchome.com/{{hash}}加载图片,当然这会失败。

一旦Angular加载完成以后,浏览器就会明白{{hash}}变量需要被具体值代替,比如logo.png
然后就会到正确的去加载图片。这就要执行两次操作。

所以,ng-src就解决了这个问题,因为它会等Angular加载完成以后,才会到正确的地址去加载数据.

使用 ng-src 替换了src :

错误写法:

<img src="https://www.orchome.com/{{hash}}"/>

正确写法:

<img ng-src="https://www.orchome.com/{{hash}}"/>


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容


上一条: ng-controller中的ng-include上无法获取值
下一条: angularjs后台获取初始化ztree数据