Угловое: изображение не будет отображаться после получения

Question

Я использую угловое выражение для запроса http.get для получения изображения, которое я сохранил на бэкэнд. Проблема в том, что я получаю ее, я не знаю, как ее отобразить. Вот мой код:

Node:

getImage = function(req, res){ 
    res.setHeader('Content-Type', req.query.mimetype) 
    fs.createReadStream(path.join('./uploads/', req.query.filename)).pipe(res) 
} 

Угловая

$http.get("/getImage/", {params: {"filename" : $scope.recipe.image.filename, "mimetype" : $scope.recipe.image.mimetype}}) 
.then(function(returnData){ 
    $scope.image = returnData.data; 
}) 

HTML:

<img ng-src="{{image}}"> 

Я использовал console.log, чтобы попытаться показать то, что возвращается, и это это то, что я получаю:

Я предполагаю, что это изображение, но опять же, я не знаю, как правильно его отображать. Какие-нибудь советы?

Answer 1

Глядя на то, что вы пытаетесь сделать. Вы должны получить filename-url этого изображения, а не использовать фактическое «изображение», когда используете его. <img ng-src="{{image}}"> tag

Answer 2

Я думаю, что для ваших целей вы должны использовать загрузку асинхронного изображения. Таким образом, вы можете использовать deffered объекты: Asynchronously load images with jQuery пожалуйста, смотрите на «phpcoding» ответить

Answer 3

Вы получаете байтовый массив из базы данных, использовать

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

Добавить санитарную обработку фильтра для данных не может быть помечены как небезопасная угловым

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);