ng-src= vs src= ngSrc directive

/ Edit this post / code

I recently ran into a small bug that I over thought for too long. I installed bower install angular-gravatar and within a few minutes I was up and running with the users avatar. Then I notiticed I had console errors regarding the path of the gravatar image. It turns out there's a right and wrong way to use angular templates... DOH! :)

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

The buggy way to write it:

<img src="{{hash}}"/>

The correct way to write it:

<img ng-src="{{hash}}"/>

Now everything works and everyone is happy. Cheers!

Eric David Smith

Father / Software Engineer / Musician / Recording Engineer / Navy Veteran / Runner / Javascript / Crypto / Human ETH: 0xa9FFaD2A2cA147F784f4C82Ee6475afb6765A974

Read More