CODEWITHSUNDEEP
jsonangularjsasp.net-web-apiangular-uiangular-ui-bootstrap
user3397656
user3397656

Reputation: 57

display binary image from db to angular partial view

I was trying to display image which is coming within the json object returning from an web api request. I'm able to display string, number and date/time in my angular partial but couldn't get the image displaying. here is my json object which contains each field of my topic (model) class 

<Topic>
<Body>dsadfsaadsfds</Body>
<Created>2014-06-15T00:00:00</Created>
<Flagged>false</Flagged>
<Id>1022</Id>
<PhotoFile>
iVBORw0KGgoAAAANSUhEUgAAB2wAAAOiCAIAAAAzNbBAAAABiWlDQ1BJQ0MgUHJvZmlsZQAAKBWtkT1LA0EQht+L0SgJGCRoCpEFRSzu5IxFTLTJB5iIRYgKane5nImQj+NyIfoD7Gy0EG0U9S+INhaWYqGFIAjB3yAEAi..........
(I want to post screen shot but i can't due to lack of reputations.....)
</PhotoFile>
<Replies i:nil="true"/>
<Title>csdaadsf</Title>

and here is my angular html partial: 

    <a data-ng-href="#/message/{{ i.id }}">{{ i.title }}</a>
  </div>
  <div class="date span2">
    {{ i.created | date:"medium" }}
  </div>
  <div class="contents span12">
    {{ i.body }}
  </div>
    <img  ng-alt="" src="{{'data:image'+i.photofile}}" />    </div>

`

Since i can get other attributes working, my angular factory and controller should be working. Are there anything wrong with my syntax in angular partial view for displaying images? Thanks

Upvotes: 1

Views: 5005

Answers (1)

XrXr
XrXr

Reputation: 2057

  • You shouldn't be using the src attribute when using Angular expression as the value. Use ng-src instead, it will ensure the image don't show up before Angular has a chance to replace the expression.

  • If the sample payload you've shown is complete, the way you are forming the data URI is incomplete. Depending on the format of the image, the header should look like 

    data:image/png;base64,[things in the JSON]

    You can read more about the format here

Upvotes: 1

Related Questions