AngularJS的404图像加载问题答案

【问题标题】：404 image load issue with AngularJSAngularJS的404图像加载问题
【发布时间】：2015-09-05 13:15:33
【问题描述】：

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

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

我将一些查询字符串参数传递给我的端点以生成一个二维码，该二维码以 GIF 格式返回。使用 AngularJS，我正在设置 <img/> 标签 src 属性。

url 和查询字符串是在 AngularJS 控制器中构建的。

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

脚本运行后，二维码按预期显示。

不希望收到此 HTTP 错误。我可以以某种方式推迟负载吗？或者稍微不同地使用 AngularJS（更正确？）

谢谢！

【问题讨论】：

【解决方案1】：

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

使用ng-src 代替，这样AngularJS 可以在准备好时创建src 属性。这将自动触发 HTTP 请求以获取图像。

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

AngularJS 文档中的更多信息：

【讨论】：