javascript - 404 image load issue with AngularJS -

i want put qr code in website, arguably image file served asp.net mvc action — in case qr code.

<div class="qrcodeview" >     <h2>scan</h2>     <img id="qr" src="{{qrlink}}" /> </div>

i passing querystring args endpoint generate qr code, returned gif. using angularjs, setting <img/> tags src attribute.

the url , querystring being constructed within angularjs controller.

my issue before angular loads , binds data control, getting http 404 error when browser tries fetch image, before angular expression replaced.

error message chrome dev tools console

once scripts have run qr code displays, expected.

would prefer not http error. can defer load somehow? or use angularjs differently (more correctly?)

thanks!

using src cause http request on initial load before angularjs has had chance update attribute correct value.

use ng-src instead angularjs can create src attribute when it's ready. automatically fire off http request image.

<div class="qrcodeview" >     <h2>scan</h2>     <img id="qr" ng-src="{{qrlink}}" /> </div>

more information in angularjs documentation:

Macro