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.

Error message from Chrome Dev Tools Console

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!

use ng-src instead of src

PavanAsTechie
– PavanAsTechie

2015-06-19 14:03:39 +00:00
Commented Jun 19, 2015 at 14:03 — PavanAsTechie
– PavanAsTechie, Commented Jun 19, 2015 at 14:03

Curtis · Accepted Answer · 2015-06-19 14:04:46Z

16

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

answered Jun 19, 2015 at 14:04

Curtis

104k69 gold badges280 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

404 image load issue with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related