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

我上传的图片使用multer，node.js，mongodb。如何以角度显示图像（图像在服务器端上传文件夹和angularjs在不同的服务器上工作）？

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

这是我的文件夹结构

服务器是基于文件的ID我retriving文件运行

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

// 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":"[email protected]","originalname":"login.jpg","__v":0}

我正在向angular和andriod应用程序发送上述响应。

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

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

我把这样的

</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文件位于服务器工作边

来源

2017-04-26 its me

在节点JS服务器转换获取API的方法来从蒙戈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}}">

来源

2017-05-03 21:25:31 Kalyan

现在显示的图像，但我没有获取“名称”：“asdf”和“email”：“[email protected]” –

只是将图像base64字符串分配给流派对象的路径属性。我已经更新了我的答案。如果解决了您的问题，请接受答案。 – Kalyan

@itsme：请检查我的更新答案。 – Kalyan

只需使用将图像路径分配给图像

假设这是响应JSON

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

在图像标签。

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

来源

2017-04-26 10:36:28

http://stackoverflow.com/questions/43603303/how-to-send-json-data-with-file-in-same-response-using-express-node-mongodb –

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

来源

2017-04-26 10:38:07

请问您是否可以在网址'http://localhost:3000/uploads/login.jpg'中找到图片？

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

来源

2017-05-04 07:08:35

上传文件夹中可用的图像，但当我做http：// localhost：3000/uploads/login.jpg。我得到了消息无法获取/uploads/login.jpg –

这意味着此图像无法访问。请检查是否有任何权限设置。 –

我该如何检查？ –

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

回答

相关问题