404 AngularJS的图像加载问题

Question

我想在网站上放置QR码，可以说它可以是任何由ASP.NET MVC Action —提供的图像文件，但在本例中是QR码。

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

我将一些querystring参数传递给我的端点以生成QR码，该码作为GIF返回。使用AngularJS，我设置<img/>标签src属性。

URL和查询字符串正在AngularJS控制器内构建。

我的问题是，在Angular加载并将数据绑定到控件之前，当浏览器试图在Angular表达式被替换之前尝试获取图像时，出现HTTP 404错误。

一旦脚本运行的QR码显示器，符合市场预期。

宁愿不要得到这个HTTP错误。我能否以某种方式推迟负荷？或者使用AngularJS稍有不同（更正确？）

谢谢！

Answer 1

使用src在AngularJS有机会使用正确的值更新属性之前，会在初始加载时产生HTTP请求。

改为使用ng-src，以便AngularJS可以在准备好时创建src属性。然后这将自动启动HTTP请求来获取图像。在AngularJS文档中

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

的更多信息：

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