图像未在IE的角度页面中加载

Question

Right now I have an angular page that makes a request to my server to get some data. In this data are urls to images in S3. Once the data has been retrieved, a variable on the scope is set with this data. In my view I iterate through these items and make a block of html for each one.

The issue arises in IE only (and only for some people on my team, not all of them) where instead of the images loading the failed to load image icon shows up. Again it does not happen for everyone, it does not happen if IE console is open, it does not happen in any other browser we have tried. If I reload the page they show up as normal.

Here is my controller (I have stripped out unnecessary stuff):

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

Here is the relevant piece of my view:

<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

You must have using IE9, and it regarding the console.log . Somewhere in a code you are using console.log which is failing in IE while console is not open.

The reason is IE9 doesn't create an window.console unless we open up a console by using F12.

For avoiding such error you could define the console object in your global Javascript file which should loaded before all other custom js files

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

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

Reference answer for more details