404 image load issue with AngularJS

Question

I want to put a QR code in a website, arguably it could be any image file that is served from an ASP.NET MVC Action — but in this case its a QR code.

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

I am passing some querystring args to my endpoint to generate a QR code, which is returned as a GIF. Using AngularJS, I am setting the <img/> tags src attribute.

The url and querystring are being constructed within an AngularJS controller.

My issue is that before Angular loads and binds the data to the control, I am getting a HTTP 404 Error when the browser tries to fetch the image, before the Angular expression is replaced.

Once the scripts have run the QR code displays, as expected.

Would prefer to not get this HTTP error. Can I defer the load somehow? Or use AngularJS slightly differently (more correctly?)

Thanks!

Answer 1

Using src will cause a HTTP Request on initial load before AngularJS has had chance to update the attribute with the correct value.

Use ng-src instead so that AngularJS can create the src attribute when it's ready. This will then automatically fire off the HTTP Request to get the image.

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

More information in the AngularJS documentation:

https://docs.angularjs.org/api/ng/directive/ngSrc