404 problem loading images using AngularJS

Question

I want to place a QR code on a website, maybe it can be any image file that is submitted using ASP.NET MVC Action - but in this case its QR code.

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

I pass some querystring arguments to my endpoint to create a QR code that returns as a GIF. Using AngularJS, I set the <img/> tags src attribute.

The URL and request are built in the AngularJS controller.

My problem is that before Angular loads and binds data to the control, I get an HTTP 404 error message when the browser tries to retrieve the image before replacing the Angular expression.

As soon as the scripts started displaying the QR code, as expected.

Prefers not to receive this HTTP error. Can i postpone the load? Or use AngularJS in a slightly different way (or rather?)

Thanks!

Answer 1

Using src will result in an HTTP request at boot time before AngularJS can 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 automatically disable the HTTP request to receive the image.

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

Further information in the AngularJS documentation:

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