AngularJS ng-src 和 ng-attr-src 在 IMG 标签中不起作用

Question

我正在尝试从 MongoDB 返回的数据中加载来自 URL 的图像。在我用户的个人资料编辑页面上，他们可以编辑某些详细信息，例如他们的电子邮件地址和他们的用户个人资料图像。电子邮件地址数据绑定良好，但是他们的个人资料图像的 ng-src 永远不会解析，所以它总是空白，即使用户对象包含它应该绑定的正确 URL。

HTML 问题：

<div ng-controller="userCtrl">
  <img ng-src="{{currentUser.profileImage}}" src="{{currentUser.profileImage}}" class="img-responsive" alt="Profile Image"/>
  <input name="name" type="text" placeholder="Enter Name" class="form-control" ng-model="currentUser.name"/>
</div>

AngularJS 调用以初始化我的控制器中的数据：

function UserCtrl($scope, $routeParams, $timeout, userService) {
  $scope.init = function() {
    userService.getCurrentUser().then(function(dataResponse) {
      if (dataResponse.data) {
        dataResponse.data.profileImage = "images/" + dataResponse.data.profileImage;
        userService.setCurrentUser(dataResponse.data);
        $scope.currentUser = dataResponse.data;
      }
    });
  }
  $timeout($scope.init());
}

我已经尝试了我可以找到参考的括号、函数调用和延迟加载方法的所有排列（因此那里的超时用法）。我很困惑为什么 currentUser.name 会很好地解决，但 currentUser.profileImage 不会。我不知道我究竟缺少什么才能使这项工作按预期进行。如有任何帮助，我们将不胜感激！

Answer 1

首先你应该使用 ngRoute 中的 resolve 方法来确保你的数据被解析而不是使用 $timeout。

我认为这里发生的是因为 currentUser.profileImage 是一个字符串（在 javascript 中是一个原始字符串），因此即使您的函数正在解析，也不会发生双向绑定，ui 已经将其计算为未定义。在 ngRoute 中使用 resolve 将确保您的页面不会加载，直到您需要的一切都得到解决。

.when("/user", {
    templateUrl: "users.html",
    controller: "UserCtrl",
    resolve: {
        currentUser: function(userService){
            var currentUser = null;
            userService.getCurrentUser().then(function(dataResponse) {
                if (dataResponse.data) {
                    dataResponse.data.profileImage = "images/" + dataResponse.data.profileImage;
                    userService.setCurrentUser(dataResponse.data);
                    currentUser = dataResponse.data;
                }
            });

            return currentUser;
        }
    }
}

现在在您的控制器中，您可以简单地执行此操作并保持相同的视图，因为 ngRoute 将处理解析：

function UserCtrl($scope, currentUser) {
    $scope.currentUser = currentUser;
}

AngularJS ng-src 和 ng-attr-src 在 IMG 标签中不起作用

AngularJS ng-src and ng-attr-src don't work in IMG tag

angularjs

image

binding

src