title: How to display base64 image in AngularJS
body: <p>Need help again ;)</p>
  
  <p>I would like to show a photo in my Angular page. These are my steps,</p>
  
  <ol>
  <li>REST API gets a document/record from backend MongoDB. The base64 images are stored as this.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/XEaPL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XEaPL.png" alt="enter image description here"></a></p>
  
  <ol start="2">
  <li>The images/data are loaded into an array {{file_src[i]}} in the component code, then the component HTML will show the image as below</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/7TDqg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7TDqg.png" alt="enter image description here"></a></p>
  
  <p>Situations:</p>
  
  <ol>
  <li>If I used "img srcs={{file_src[i]}}", I got insecure operation. My REST API server has CORS enabled. Since the image is base64 data and doesn't have any URL, I don't know it is related to CORS.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/1z7tJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1z7tJ.png" alt="enter image description here"></a></p>
  
  <ol start="2">
  <li>I googled around and found the ng-src and data-ng-src directives. Both of them don't work too. Please see my binding error below.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/Rvvst.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rvvst.png" alt="enter image description here"></a></p>
  
  <p>Question: how to show the base64 image in my Angular page? </p>
  
  <p>------Code as requested by Vic--------</p>
  
  <pre><code>&lt;section class="fhirForm"&gt;
          &lt;fieldset&gt;
              &lt;legend class="hd"&gt;
                  &lt;span class="text"&gt;Photo&lt;/span&gt;
              &lt;/legend&gt;
              &lt;div class="bd" formArrayName="photos"&gt;
                  &lt;div *ngFor="let photo of patFormGroup.controls.photos.controls; let i=index" class="panel panel-default"&gt;
                      &lt;div class="panel-body" [formGroupName]="i"&gt;
  
                          &lt;label&gt;Description&lt;/label&gt;
                          &lt;input type="text" class="form-control" formControlName="desc"&gt;
  
                          &lt;label&gt;Photo&lt;/label&gt;
                          &lt;input type="file" size="30" multiple formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input&gt;
                          &lt;!-- img src={{file_srcs[i]}} crossorigin="anonymous" alt="" /--&gt;
                          &lt;img data-ng-src={{file_srcs[i]}} alt="" /&gt;
  
                          &lt;span class="glyphicon glyphicon-remove pull-right" *ngIf="patFormGroup.controls.photos.controls.length &gt; 1" (click)="removePhoto(i)"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
  
          &lt;div class="margin-20"&gt;
              &lt;a (click)="addPhoto()" style="cursor: default"&gt;
                  &lt;small&gt;Add another photo +&lt;/small&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>  initPhoto(desc?: String, photo?: string) {
      //Add new entry on the 1 dimensional array. Allow 1 photo per section
      this.file_srcs.push(photo);
      console.log("Photo for file_srcs: [" + this.file_srcs[this.file_srcs.length - 1] + "]");
  
      return this.formBuilder.group({
        desc: [desc],
        photo: [photo]
      });
    }
  </code></pre>
  
  <p>Please see the console.log. It showed that this.file_srcs are valid.</p>
  
  <p><a href="https://i.stack.imgur.com/tbl5h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tbl5h.png" alt="enter image description here"></a></p>
  
  <p>------------- Error Message in Chrome -------</p>
  
  <p><a href="https://i.stack.imgur.com/8RO4t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8RO4t.png" alt="enter image description here"></a></p>
  
  <p>------------- UPDATE 1 -----------</p>
  
  <p>If I commented out the "input type=file ..." line above the "img src" as below, I can see the photo. What's wrong with my input? Sorry, I don't remember what is that #input for.</p>
  
  <p>Hence, my issue may not be in the photo, but on the input line ;) Shame on me!!!</p>
  
  <pre><code>                &lt;label&gt;Photo&lt;/label&gt;
                  &lt;!-- input type="file" size="30" formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input --&gt;
                  &lt;img src={{file_srcs[i]}} crossorigin="anonymous" alt="" /&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Qg3Gr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qg3Gr.png" alt="enter image description here"></a></p>
  
  <p>--------- RESOLVED -----------</p>
  
  <p>Thanks a lot for all the help!!!</p>
  
  <p>i. the base64 image isn't the root cause;</p>
  
  <p>ii. the file input "input type=file" was initialized by incorrect supplying the base64 image as the default value. It caused the error - failed to set the value of HtmlInputElement is correct in IE. The error message 'Insecure Operation' may be misleading in Firefox.</p>
  
  <p>Hence, the root cause is not related to the base64 image. I would like to delete this thread a week later.</p>
  
  <pre><code>initPhoto(desc?: String, photo?: string) {
  
  this.file_srcs.push(photo);
  console.log("Photo for file_srcs[" + (this.file_srcs.length - 1) + "]: [" + this.file_srcs[this.file_srcs.length - 1] + "]");
  
  return this.formBuilder.group({
    desc: [desc],
    photo: [""]     //This was photo: [photo]. After supplying the default value as "", it works well.
  });
  </code></pre>
  
  <p>Best regards,</p>
  
  <p>Autorun</p>