如何以角度顯示圖像（圖像在服務器端上傳文件夾和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在不同的服務器上工作）？

回答

相關問題