Angular：图像一旦检索就不会显示[重复]答案

【问题标题】：Angular: image won't display once retrieved [duplicate]Angular：图像一旦检索就不会显示[重复]
【发布时间】：2016-07-31 20:06:15
【问题描述】：

我正在使用 Angular 发出 http.get 请求以检索我存储在后端的图像。问题是一旦我得到它，我不知道如何显示它。这是我的代码：

节点：

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 尝试显示返回的内容，这就是我得到的：

我猜那是图像，但同样，我不知道如何正确显示它。有什么建议吗？

【问题讨论】：

标签： angularjs node.js

【解决方案1】：

你正在从数据库中获取字节数组，使用

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

为数据添加清理过滤器，以免被角度标记为不安全

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

【讨论】：

【解决方案2】：

我认为出于您的目的，您应该使用异步图片上传。所以你可以使用延迟对象： Asynchronously load images with jQuery 请看“phpcoding”答案

【讨论】：

【解决方案3】：

看看你尝试做什么。您应该获得该图像的filename-url，而不是在使用它时使用实际的“图像”<img ng-src="{{image}}"> 标签

【讨论】：

但是我如何将参数发回以检索正确的图像呢？因为 URL 只是 /getImage/。如果我尝试使用图像的路径，它只会给我一个 404 错误。
除非您知道图像的实际路径，否则 Daniel Beck 的评论可能是您的解决方案。