Question

将AngularJS与Node.js服务器和Express 4（MEAN）一起使用，我有一个简单的输入字段，用于输入图像名称或用户名作为搜索查询，然后将其发送到我的服务器。服务器通过发送图像来响应，该图像然后被动态显示在输入字段旁边的IMG标签内。同样，服务器通过使用res.sendfile（res.sendfile（path / image.jpg））发送所需图像来直接响应。

HTML：

<input type="text" ng-blur="loadImage()" ng-model="imageQUERY">
<img data-ng-src="data:image/jpg,{{remoteDynamicImage}}">

AngularJS：

$http({
   method: 'GET',
   url: '/loadRemoteImage',
   data: {'url': $scope.imageQUERY}
}).success(function(data, status, headers, config){
  if(data){
     //todo: render received image data inside IMG tag
     $scope.remoteDynamicImage = data;
  }
});

我几乎被困在这里因为代码不起作用：图像似乎被转移（根据萤火虫）但不会显示在图像标签内。最后一个缺少的成分是什么？我是否必须对图像进行base64编码（如此方法angularJS display base64 image），还是有其他方法没有base64编码？我在Angular doc中找不到任何有用的东西。谢谢你的提示。

Answer 1

好的，在将图像发送到客户端之前，我使用base64编码解决了这个问题。

这是我的服务器端（Node.js）脚本（摘录）：

[... some operation for selecting the image ...]

return fs.readFileAsync('someFile.jpg')
.then(function(imagefile){
   res.send(imagefile.toString('base64')); 
});

这是我的角度控制器：

$http({
   method: 'GET',
   url: '/loadRemoteImage',
   data: {'url': $scope.imageQUERY}
}).success(function(data, status, headers, config){
  if(data){
     $scope.remoteDynamicImage = data;
  }
});

这是html页面中的IMG标记：

<img data-ng-src="data:image/jpeg;base64,{{remoteDynamicImage}}">

希望它可以帮助那些也在努力解决它的人。仍然好奇这是否适用于没有base64编码，但只是普通的图像数据。

AngularJS：IMG标记内的动态图像更改

1 个答案: