Javascript 使用节点/角度在浏览器中显示来自数据url的图像？

我正在使用生成CAPTCHA作为数据URL。我想在浏览器中显示生成的PNG图像。我的验证码生成器如下所示，与节点验证码链接中的示例几乎相同：

exports.getChallenge = function(req, res) {
  captcha({ fileMode: 0 }, function(text, data) {
    res.send(data);
  });
};

我将该函数路由到/api/challenge，并使用一个角度控制器检索该质询：

app.factory('Challenge', ['$resource',  function($resource) {
  return $resource('/api/challenge');
}]);

app.controller('challengeController', ['$scope', 'Challenge', function($scope, Challenge) {
  $scope.initChallenge = function() {
    Challenge.get( function(res) {
      $scope.captchaImage = res;
    });
  };
}]);

现在，在我的实际HTML文件中，我有以下内容：

<div data-ng-controller="challengeController" data-ng-init="initChallenge()">
  <img ng-src="{{captchaImage}}"></img>
</div>

---

但是，图像不会加载。您只会看到在图像未加载时出现的小破损图像图标。如何将验证码显示为图像？

在

$scope.captchaImage

中有什么？您可以发布此变量的内容吗？请尝试将

{{captchaImage}

刷新为

src

，而不是

ng src

。如您所说，如果

captchaImage

包含一个数据URL，那么直接将其放入

img[src]

就足够了。