javascript - 图像未加载到 IE 的 Angular 页面中

Question

现在我有一个 Angular 页面，它向我的服务器发出请求以获取一些数据。此数据中包含 S3 中图像的 url。一旦检索到数据，就会使用该数据设置作用域上的变量。在我看来，我会迭代这些项目并为每个项目创建一个 html block 。

此问题仅在 IE 中出现(并且仅针对我团队中的某些人，而不是所有人)，其中显示的不是加载图像，而是显示加载图像失败图标。同样，这种情况不会发生在每个人身上，如果 IE 控制台打开则不会发生这种情况，在我们尝试过的任何其他浏览器中也不会发生这种情况。如果我重新加载页面，它们会正常显示。

这是我的 Controller (我已经删除了不必要的东西):

$http.get('/url').success(function (data, status, headers, config) {
    $scope.CardList = data;
})

这是我的相关观点:

<div class="card-tile white_box" ng-repeat="card in CardList.Cards">
        <div class="card-tile-header pointer">
            <span class="card-month">{{card.MonthName}} {{card.Year}}</span>
        </div>
        <div class="card-tile-content pointer" >
            <img ng-src="{{ card && card.ImageUrl || ''}}" />
        </div>
    </div>

Answer 1

您必须使用 IE9，并且它与 console.log 有关。在代码中的某个位置，您使用的 console.log 在控制台未打开时在 IE 中失败。

原因是 IE9 不会创建 window.console，除非我们使用 F12 打开控制台。

为了避免此类错误，您可以在全局 Javascript 文件中定义 console 对象，该对象应在所有其他自定义 js 文件之前加载

if (!window.console) {
    window.console = {};
}

if (!console.log) {
    console.log = function() {};
}

Reference answer了解更多详情