Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

Seems like a straightforward issue, but how can you retrieve an image stored in a database, using Web API, then display it using Angular?

Here is an example Web API service which is correctly returning a JPG file (using 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;
    }

Then on the http client-side, I am using angular to retrieve the data. Data is definitely getting retrieved, but just not displayed.

    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;
}

And the html:

 <img ng-src="{{cameraPic}}" /> </div>
share|improve this question
1  
I sugest you firstly check your scope data tree to see if <img> is put in right scope to display. Best tool to do this is AngularJS Batarang – Quy Dec 28 '15 at 8:31
up vote 1 down vote accepted

Looking at your server side code, I think you can directly write like this:

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

Just make sure you are replacing ehConstants.incidenT_IDX with actual content.

share|improve this answer

As documented in this answer, you can also do something like

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.