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

半兽人 发表于: 2019-02-23   最后更新时间: 2020-03-30 22:32:44  
{{totalSubscript}} 订阅, 3,966 游览

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}}"/>
更新于 2020-03-30

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章