title: Angular img src is unknown when calling function
body: <p>I need to dynamically change the img src by calling a function that returns the image path, but when I use the code below, the image element shows as <code>&lt;img src(unknown)/&gt;</code></p>
  
  <p><strong>component.ts:</strong></p>
  
  <pre><code>getMedia(row) {
      this.sharedDataService.inventoryRows.forEach(function(elem){
        if(row.vin === elem.vin){
          console.log(elem.media[0].href);    //logs string correctly
          return elem.media[0].href;
        }
      });
    }
  </code></pre>
  
  <p>this code successfully logs the string stored in <code>elem.media[0].href</code> to the console, so I'm confident it is returning the correct path as a string.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;img src="{{getMedia(row)}}" /&gt;
  //DOM element comes back as &lt;img src(unknown)/&gt;
  </code></pre>
  
  <p>I've also tried the following, as suggested by other Stackoverflow answers, but I don't get the desired DOM element using this either</p>
  
  <pre><code>&lt;img [src]="getMedia(row)" /&gt;
  //DOM element comes back as &lt;img src="null"/&gt;
  </code></pre>
  
  <p>I'm certain that this should be possible, but I'm clearly missing some behind-the-scenes knowledge about its inner workings</p>