CODEWITHSUNDEEP
javascripthtmlangularjscross-browser
BanksySan
BanksySan

Reputation: 28500

Image not displaying and no errors despite <img> tag being present

(Repoed on Plunkr)

I have a page, the user enters a username, website goes and gets some metadata, including the Gravatar ID. It then uses the ID to display the avatar, however, despite the img tag being there, the correct URL being in it and there being no errors in the developer console of the browser the image isn't displayed.

I can also see the HTTP call being made, and returning 200.

NB

If I open the Plunkr in Firefox, I can a reference error:

ReferenceError: angular is not defined
http://run.plnkr.co/plunks/4tGAFuqjfqn9hYUy1Xoa/app.js
Line 1

NB

In both IE and Safari it works as expected, only Chrome fails without error.

<!DOCTYPE html>
<html ng-app="gitHubViewer">
<head lang="en">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="script/angular/app.js"></script>
    <script src="script/angular/controllers/main-controller.js"></script>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="MainController">
    <div>
        <h2>{{user.name}}</h2>
        <div>Username: {{user.login}}</div>
        <div>Gravatar ID: {{user.gravatar_id}}</div>
        <img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" />
    </div>

    <form name="searchUser">
        <input type="search" placeholder="Username to find." ng-model="username" />
        <input type="submit" value="Search" ng-click="search(username)"/>
    </form>
</div>
</body>
</html>

Main Controller:

(function (app) {
    var MainController = function ($scope, $http) {
        $scope.message = 'Hello World!';

        $scope.search = function (username) {
            console.log('Username = ' + username);

            $http.get('https://api.github.com/users/' + username)
                .then(onUserComplete);
        };

        var onUserComplete = function (response) {
            $scope.user = response.data;
        };

    };

    app.controller("MainController", ["$scope", "$http", MainController])
})(gitHubViewer);

app.js

var gitHubViewer = gitHubViewer || angular.module("gitHubViewer", [], function () {
});

Upvotes: 0

Views: 166

Answers (2)

BanksySan
BanksySan

Reputation: 28500

OK, problem solved as far as Chrome goes. I noticed that I wasn't seeing my profile piccy on here and it turns out Ghostery blocks Gravatar by default. Whitelisting it solved the problem.

Firefox seems a little tricky, just tried blatting it and downloading it from the their website and now everything in the world (including it's own add-ons service) is throwing invalid certificate errors.

Fiddler running without setting up it's certs caused Firefox to throw cert errors, including doing unable to get some JS files on Plunkr.

Upvotes: 0

Alex
Alex

Reputation: 4774

It works just fine both in Chrome and Firefox.

Chrome Version 36.0.1985.143 m

Firefox 31

Upvotes: 1

Related Questions