如何以角度显示图像（服务器端上传文件夹中的图像上传和angularjs在不同的服务器上工作）？答案

【问题标题】：How to display image in angular(image uploded in server side uploads folder and angularjs is working in different server)?如何以角度显示图像（服务器端上传文件夹中的图像上传和angularjs在不同的服务器上工作）？
【发布时间】：2017-05-05 03:51:27
【问题描述】：

我使用 multer,node.js,mongodb 上传图片。

我在上传文件夹中上传了图片，并将路径存储在 MongoDB 中。

这是我的文件夹结构

服务器正在运行

http://localhost:3000/images/590051dcc90cf702e452b9c1

基于文档 ID 我正在检索文档

// To get the single image/File using id from the MongoDB
app.get('/images/:id', function(req, res) {

//calling the function from index.js class using routes object..
routes.getImageById(req.params.id, function(err, genres) {
if (err) {
throw err;
}
//res.download(genres.path);
res.send(genres)
});
});

我收到了这样的回复

{"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"asdf@gmail.com","originalname":"login.jpg","__v":0}

我正在向 Angular 和 Android 应用程序发送上述响应。

现在我想以角度显示此图像。

角度服务器在不同的服务器节点服务器在不同的服务器工作

我是这样写的

</head><body>
<body ng-controller="RegisterCtrl" ng-app="myApp">
 <div ng-init="signin()">
 <img ng-src="{{response.path}}"/>
   {{response}}
    </div>
</body>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>
<script>var myApp = angular.module('myApp', []);
myApp.controller('RegisterCtrl', function ($scope,$http) {

$scope.signin = function()

{

$http.get('http://localhost:3000/images/590051dcc90cf702e452b9c1').success(function(data, response)
{
$scope.response  = data;
console.log(data);
}); 

}
});
</script>
</body></html>

我遇到了错误

file:///C:/Users/mohan/Desktop/uploads/login.jpg net::ERR_FILE_NOT_FOUND

bcoz 文件位于服务器端

【问题讨论】：

标签： javascript angularjs node.js mongodb multer

【解决方案1】：

在Node JS服务器上转换get api方法从Mongo Db获取图片路径并返回图片的字节数组。

// To get the single image/File using id from the MongoDB
app.get('/images/:id', function(req, res) {

        //calling the function from index.js class using routes object..
        routes.getImageById(req.params.id, function(err, genres) {
             if (err) {
                 throw err;
             }
             //res.download(genres.path);
             var fs = require('fs');
             // read binary data
             var bitmap = fs.readFileSync(genres.path);
             // convert binary data to base64 encoded string
             //res.send(new Buffer(bitmap).toString('base64'));
             genres.path = new Buffer(bitmap).toString('base64');

             res.send(genres)
           });
});

将此字节数组绑定到您的标签。

  <img ng-src="{{'data:image/png;charset=utf-8;base64,' + response.data.path}}">

【讨论】：

图像现在显示，但我没有得到 "name":"asdf" 和 "email":"asdf@gmail.com"
只是将图像 base64 字符串分配给您的流派对象的路径属性的问题。我已经更新了我的答案。如果可以解决您的问题，请接受答案。
如果我添加此代码不起作用。但是如果我给然后图像正在显示，但我没有得到姓名和电子邮件
我们可以快速聊天吗
让我们continue this discussion in chat.

【解决方案2】：

只需使用ng-src 为图像分配路径

假设这是响应 json

$scope.response = {"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"asdf@gmail.com","originalname":"login.jpg","__v":0}

在图像标签中。

<img ng-src"{{response.path}}">

【讨论】：

stackoverflow.com/questions/43603303/…
我有一个类似的东西，除了我使用 angular 5，我有一个图像数组，所以我使用 for 循环来遍历它们，当我这样做时 img src = {{product.path}} 它添加localhost:4200 （角度应用程序），但我想显示 localhost:3000 这是服务器端（nodejs）知道我该怎么做吗？

【解决方案3】：

您可以使用<img ng-src="{{response.path}}"/>

【讨论】：

【解决方案4】：

能否请您确认图片是否在网址“http://localhost:3000/uploads/login.jpg”中可用？

如果不是，则图像路径不正确。请检查是否正确上传到文件夹中。

【讨论】：

图片在上传文件夹中可用，但当我这样做时 localhost:3000/uploads/login.jpg 。我收到消息无法获取 /uploads/login.jpg
这意味着该图像无法访问。请检查是否有权限设置。
如何检查？
您得到的响应状态是什么？ 404 还是 401？