0
1.5K
Vistas¿Cómo mostrar la imagen en angular (imagen cargada en la carpeta de carga del lado del servidor y angularjs está funcionando en un servidor diferente)?
Cargué la imagen usando multer, node.js, mongodb.
Cargué la imagen en la carpeta de carga y almacené la ruta en MongoDB.
esta es mi estructura de carpetas
el servidor se está ejecutando
http://localhost:3000/images/590051dcc90cf702e452b9c1basado en la identificación del documento, estoy recuperando el documento
// 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) }); });Recibí una respuesta como esta
{"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"asdf@gmail.com","originalname":"login.jpg","__v":0}Estoy enviando la respuesta anterior a la aplicación angular y andriod.
ahora quiero mostrar esta imagen en angular.
el servidor angular está funcionando en un servidor de nodo de servidor diferente está funcionando en un servidor diferente
pongo así
</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>estoy recibiendo un error
file:///C:/Users/mohan/Desktop/uploads/login.jpg net::ERR_FILE_NOT_FOUNDEl archivo bcoz se encuentra en el lado del servidor
3 Respuestas
Responde la pregunta0
En el servidor Node JS, convierta el método get api para obtener la ruta de la imagen de Mongo Db y devolver la matriz de bytes de la imagen.
// 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) }); });Vincule esta matriz de bytes a su etiqueta.
<img ng-src="{{'data:image/png;charset=utf-8;base64,' + response.data.path}}">0
Simplemente asigne la ruta a la imagen usando ng-src
Supongamos que esta es la respuesta json
$scope.response = {"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"asdf@gmail.com","originalname":"login.jpg","__v":0}en la etiqueta de la imagen.
<img ng-src"{{response.path}}">0
Puede usar <img ng-src="{{response.path}}"/>