使用 Web API 从数据库中检索图像，然后在 angularJS 中显示它答案

【问题标题】：Retrieve image from database using Web API, then displaying it in angularJS使用 Web API 从数据库中检索图像，然后在 angularJS 中显示它
【发布时间】：2016-04-02 02:18:45
【问题描述】：

这似乎是一个简单的问题，但是如何使用 Web API 检索存储在数据库中的图像，然后使用 Angular 显示它？

这是一个正确返回 JPG 文件的示例 Web API 服务（使用 HttpResponseMessage）：

    public HttpResponseMessage GetIncidentImages(Guid IncidentIDX) {
        var response = new HttpResponseMessage();

        List<T_EM_INCIDENT_ATTACH> att = db_Layer.GetT_EM_INCIDENT_ATTACH_byIncidentIDX(IncidentIDX);
        if (att != null)
        {
            if (att.Count > 0)
            {
                var pictureBytes = att[0].ATTACH_CONTENT;  //ATTACH_CONTENT is a byte array

                if (pictureBytes == null)
                    response.StatusCode = HttpStatusCode.NotFound;
                else
                {
                    response.Content = new ByteArrayContent(pictureBytes);
                    response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
                }
            }
            else
                response.StatusCode = HttpStatusCode.NotFound;
        }

        return response;
    }

然后在 http 客户端，我使用 angular 来检索数据。数据肯定会被检索到，但只是没有显示。

    dbManagerService.syncIncidentAttach(ehConstants.incidenT_IDX).then(function (res) {
        console.log("return", res);

        $scope.cameraPic = res;
    });

function _syncIncidentAttach(incIDX) {
    var deferred = $q.defer();

    $http.get($rootScope.serverBaseUrl + 'api/incident/GetIncidentImages?IncidentIDX=' + incIDX, { responseType: "blob" })
    .success(function (res, status, headers, config) {
        // encode data to base 64 url
        fr = new FileReader();
        fr.onload = function () {
            // this variable holds your base64 image data URI (string)
            // use readAsBinary() or readAsBinaryString() below to obtain other data types
            console.log(fr.result);
        };
        fr.readAsDataURL(res);

        deferred.resolve(fr);
    })
    .error(function(data, status, headers, config) {
        conole.log('error getting image');
    });

    return deferred.promise;
}

还有html：

 <img ng-src="{{cameraPic}}" /> </div>

【问题讨论】：

我建议你首先检查你的范围数据树，看看是否放在正确的范围内显示。最好的工具是AngularJS Batarang

标签： javascript angularjs asp.net-web-api

【解决方案1】：

看你的服务器端代码，我觉得你可以直接这样写：

<img ng-src="{{serverBaseUrl}}api/incident/GetIncidentImages?IncidentIDX={{ehConstants.incidenT_IDX}}" />

只需确保您将 ehConstants.incidenT_IDX 替换为实际内容即可。

【讨论】：

【解决方案2】：

如 this answer 中所述，您还可以执行类似的操作

<img ng-src="{{'data:image/png;base64,' + main.user.imageData}}">

【讨论】：