Question

我不知道如何解释这个，但让我试试..

源代码中的图片，但不是第一次在浏览器中显示。当你刷新它的可见时。请告诉我们原因。

我已经检查了它，就在容器div里面，我可以看到。
再次加载/刷新页面时，它始终可见。
有一段时间，即使是第一次访问也可以看到它，但它很少见，只有1/10次。
以前使用相同的代码工作正常。

如果没有确切的答案，请尝试解释可能的原因。

我正在使用node.js，angular.js，浏览器是Chrome版本45.我确信它与客户端相关。

代码

这是我的div

          <div id='userIntro'>
            <img src='images/{{dp}}' style='display:inline;max-width: 50px;max-height: 50px;z-index:2;' ng-click='changeUserImage()' id='userDP'/>
            <br/>
            <label style='display:inline;'>Welcome {{userName}}</label>
            <input type='file' name='userImageF' id='userImageF' accept="image/*" style='display:none;' onchange="angular.element(this).scope().readImage()"/>
          </div>

这是我的控制器功能代码。

 var uAjax = $http.get("/getUser");
        uAjax.success(function(data) {
            if (data === 'failed')
            {

                $location.url('/login');

            }
            else
            {

                $scope.userName = data.username;
                $scope.dp = '/'+data.dp;
            }
        });

此代码以前工作正常..

Answer 1

我觉得src attrs的问题。您使用表达式，因此您应该使用ng-src。示例：<img ng-src="image/{{url}}" ...

Answer 2

以下是演示http://jsfiddle.net/r904fnb3/2/

var deffered = $q.defer();
setTimeout(function(){
deffered.resolve('https://angularjs.org/img/AngularJS-large.png');
}, 3000);    
//promise
deffered.promise.then(function(res){
    console.log(res);
    vm.image = res;
});

您可以使用$ q deffred服务来处理您的图像varialbe 希望这可以帮到你

Answer 3

正如Errorpro在评论中提到的那样。

问题出在src ...因为我使用的是表达式，所以它应该是ng-src。

thnx Errorpro。

源代码中的图片，但首次未在浏览器中显示

3 个答案: