Retrieve image from database using Web API, then displaying it in angularJS

Question

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>

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
– Quy, Commented Dec 28, 2015 at 8:31

Shashank Agrawal · Accepted Answer · 2015-12-28 08:31:48Z

1

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.

answered Dec 28, 2015 at 8:31

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:06:45Z

0

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

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

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 20, 2016 at 17:20

jaycer

3,1212 gold badges29 silver badges37 bronze badges

Collectives™ on Stack Overflow

Retrieve image from database using Web API, then displaying it in angularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related