title: Angular2 net::ERR_UNKNOWN_URL_SCHEME for Base64 image
body: <p>I am trying to display jpg/png images on HTML. From server I am getting Base64 string. Which I am displaying from in HTML as:</p>
  
  <pre><code>&lt;md-card&gt;
    &lt;md-card-content&gt;
      &lt;img id="uploadPicture" class="uploadPicture" [src]="'data:image/jpg;base64,' +file_src "&gt;
    &lt;/md-card-content&gt;
    &lt;md-card-actions&gt;
      &lt;input id="uploadedFile" type="file" #fileInput (change)="chooseImage(fileInput.files)"/&gt;
      &lt;button md-raised-button color="primary" [disabled]="isUploaded" (click)="uploadPicture(fileInput.files)"&gt;{{'upload picture' | translate}}&lt;/button&gt;
      &lt;button md-raised-button color="primary" [disabled]="isRemoved" (click)="removePicture()"&gt;{{'remove picture' | translate}}&lt;/button&gt;
    &lt;/md-card-actions&gt;
  &lt;/md-card&gt;
  </code></pre>
  
  <p>When I upload the picture using PUT URL, it is working fine. But when I try to download it using GET API, its giving me error as: </p>
  
  <blockquote>
    <p>net::ERR_UNKNOWN_URL_SCHEME</p>
  </blockquote>
  
  <p>I am getting warning also as : </p>
  
  <blockquote>
    <p>WARNING: sanitizing unsafe URL value</p>
  </blockquote>
  
  <p>I use the sanitizer in my component as below:</p>
  
  <pre><code>ngOnInit(): void {
      if(this.file_src!='')
      {
        this.userService.getPicture()
        .then(
        (response:any) =&gt; {
          console.log(response);
          this.file_src = response.json();
          this.file_src = this._sanitizer.sanitize(SecurityContext.URL, `data:image/png;base64,${this.file_src}`);
        }
        )
        .catch(
        (error:any) =&gt; {
          this.displayError();
        }
        )
      }
    }
  </code></pre>
  
  <p>But it didn't work. Can someone tell me what could be an issue?</p>