Question

我有一个页面，用户输入用户名，网站会获取一些元数据，包括Gravatar ID。然后，它使用ID显示头像，但是，尽管存在img标记，其中包含正确的URL，并且浏览器的开发者控制台中没有错误，图像也不会显示。

我还可以看到正在进行的HTTP调用，并返回200。

NB

如果我在Firefox中打开Plunkr，我可能会出现引用错误：

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

NB

在IE和Safari中，它按预期工作，只有Chrome失败且没有错误。

<!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>

主控制器：

(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 () {
});

Answer 1

在Chrome和Firefox中都可以正常使用。

Chrome版本36.0.1985.143 m

Firefox 31

Answer 2

好的，就Chrome来说问题已经解决了。我注意到我在这里看不到我的个人资料图片，默认情况下结果为Ghostery个版块Gravatar。白名单解决了这个问题。

~~Firefox似乎有点棘手，只是尝试将其从网站上下载并下载，现在世界上的所有内容（包括它自己的附加服务）都会导致无效的证书错误。~~

~~Fiddler在没有设置它的证书的情况下运行导致Firefox抛出证书错误，包括无法在Plunkr上获取一些JS文件。~~

尽管存在<img/>标记，但图像无法显示且无错误

NB

NB

2 个答案: