title: angular2 display base64 image
body: <p>I'm trying to display an image that comes from a server as a base64 string. The http and server details are not important to my question (basically, it works).
  I have this code that does not work; i.e. I see all the data in the component but no image shows on the screen.</p>
  
  <p>the service:</p>
  
  <pre><code>import { Injectable } from 'angular2/core'
  import {Observable} from 'rxjs/Observable';
  @Injectable()
  export class ImageService {
      constructor() {
      }
      public getImage(): Observable&lt;string&gt; {
          return Observable.create(imageData);
      }
  }
  const imageData: string = "iVBORw0KGgoAAAANSUhE...";
  </code></pre>
  
  <p>The component:</p>
  
  <pre><code>import { Component } from 'angular2/core';
  import { ImageService } from './service'
  @Component({
      selector: 'my-app',
      template: '&lt;div&gt;&lt;img [src]="data:image/PNG;base64,{{imageContent}}"&gt; &lt;/div&gt;',
      providers: [ImageService]
  })
  export class AppComponent {
  private imageContent: string = "";
      constructor(imageService: ImageService) {
          imageService.getImage().subscribe(response =&gt; {
              this.imageContent = response;
          });
      }
  }
  </code></pre>
  
  <p>As mentioned, the code does not work. Instead of the image on the screen, I receive:  Quotes are not supported for evaluation!</p>
  
  <p>I'll appreciate a working example for this simple problem.</p>