title: Angular2 Base64 sanitizing unsafe URL value
body: <p>Response from my server looks like following:</p>
  
  <pre><code>[{"coreGoalId":1,"title":"Core goal 1","infrastructure":"Sample Infrastructure","audience":"People","subGoals":null,"benefits":[{"benefitId":1,"what":"string","coreGoalId":1}],"effects":null,"steps":null,"images":[{"imagelId":1,"base64":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU\nFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgo\nKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAIWAe4DASIA\nAhEBAxEB/8QAHAABAAIDAQEB"}]}]
  </code></pre>
  
  <p>I am trying to display the base64 image returned in it.</p>
  
  <p>In my component:</p>
  
  <pre><code>ngOnInit() {
  
      this.homeService.getGoals()
      .subscribe(
          goals =&gt; this.coreGoals = goals,
          error =&gt;  this.errorMessage = &lt;any&gt;error);
  }
  </code></pre>
  
  <p>and then in template:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let goal of coreGoals"&gt;
          {{goal.title}}
          &lt;img [src]="'data:image/jpg;base64,'+goal.images[0].base64 | safeHtml" /&gt;
      &lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>Where safeHtml is a Pipe I created like following:</p>
  
  <pre><code>import { Pipe } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser';
  
  @Pipe({name: 'safeHtml'})
  export class SafeHtml {
    constructor(private sanitizer:DomSanitizer){}
  
    transform(html) {
      return this.sanitizer.bypassSecurityTrustHtml(html);
    }
  }
  </code></pre>
  
  <p>This gives me <code>Required a safe URL, got a HTML</code> error. What is going wrong here? If I remove the pipe from <code>&lt;img /&gt;</code> then it says unsafe url.</p>