title: Angular 7 - Display Images from byte in Database
body: <p>I am having around 400 images all stored in database and getting those in C# code in byte[].</p>
  
  <p>My requirement is very simple. I have Design class which contains Name, Code and byte[]. I am binding this class using ngFor</p>
  
  <pre><code>&lt;div *ngFor="let design of designs" &gt;
  &lt;img height="200" width="200"  src="{{design.data}}" /&gt;
  
  &lt;div&gt;
    &lt;h2&gt;{{ design.name }}&lt;/h2&gt;
    &lt;h4&gt;{{ design.code }}&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I tried <a href="https://stackoverflow.com/questions/38324762/angular-2-render-byte-from-web-api-as-an-image-src">this link</a> but it is not working for me. I used both directive and other method. Looks like few things got changed from 2 to 7.</p>
  
  <p>The second answer in the above link without using directive gave me another error. <a href="https://stackoverflow.com/questions/42145287/uncaught-syntaxerror-unexpected-token-u-in-json-at-position-0-at-json-parse-a">Error is this</a></p>
  
  <p>Finally, after spending more than a half day, I am unable to display image in UI. I am developing using Angular 7. What would be the best way to display images?</p>