title: Angular - Getting property from json object and displaying it as image
body: <p>I'm having a problem with displaying a image from json that is located on api online.
  Excuse me for my poor angular skills, I just started it 2 weeks ago.
  I'm trying to access "image1" property from "data" object in json file.</p>
  
  <p>I've tried using reader to read from url and it worked well, but retrieving from api - specifically json's object "data" and property "image1" seems to be a problem. Maybe problem is that my approach is wrong with just setting src to the "data" object, I need to set it to data["image1"], I've tried setting to <code>[src]="data["image1"]</code> but with no success.</p>
  
  <p>My JSON </p>
  
  <pre><code>[
    {
      "id": 1,
      "type": "car",
      "name": "Porsche 911",
      "description": "driving machine",
      "area_id": null,
      "data": {
        "name": "JSON Name",
        "description": "JSON Description",
        "image1": "https://unsplash.com/photos/u6BPMXgURuI"
      }
    }
  ]
  </code></pre>
  
  <p>My interface Car</p>
  
  <pre><code>export interface Car {
    id: string;
    type: string;
    name: string;
    description: string;
    area_id: string;
    data: string;
  }
  </code></pre>
  
  <p>My component html</p>
  
  <pre><code>&lt;tr *ngFor="let i of cars | async"&gt;
          &lt;td&gt;{{i.id | json}}&lt;/td&gt;
          &lt;td&gt;{{i.type | json}}&lt;/td&gt;
          &lt;td&gt;{{i.name | json}}&lt;/td&gt;
          &lt;td&gt;{{i.description | json}}&lt;/td&gt;
          &lt;td&gt;{{i.area_id | json}}&lt;/td&gt;
          &lt;td&gt;&lt;img [src]="i.data | json" alt="image"&gt;&lt;/td&gt;
        &lt;/tr&gt;
  </code></pre>
  
  <p>My component ts file</p>
  
  <pre><code>export class CarComponent implements OnInit {
  
    cars: Observable&lt;Car[]&gt;;
  
    constructor(private http: HttpClient) {}
  
    ngOnInit() {
      this.cars = this.http.get&lt;Car[]&gt;('https://car-garage-             
  beta.herokuapp.com/api/cars/porsche');
    }
  }
  </code></pre>
  
  <p>In my interface if I set "data" type to string or object I get the same <strong>error</strong> </p>
  
  <pre><code>net::ERR_UNKNOWN_URL_SCHEME
  </code></pre>