display binary image from db to angular partial view

Question

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

XrXr · Accepted Answer · 2014-06-16 02:41:36Z

1

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

answered Jun 16, 2014 at 2:41

XrXr

2,0671 gold badge14 silver badges22 bronze badges

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

1 Comment

user3397656 Over a year ago

Thanks @XrXrXr! Looks like my page keeps loading without generating content after adjusting the changes but at least now i know how image is supposed to be presented in html!

Collectives™ on Stack Overflow

display binary image from db to angular partial view

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related