title: AngularJS ng-src path to image
body: <p>Regarding the use of <code>ng-src</code> in order to display an image, this code works during runtime - but not on the initial page load:</p>
  
  <pre><code>&lt;div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage"&gt;
      &lt;img ng-src="../../Images/{{widget.initImage}}"  /&gt;
      &lt;div class="caption"&gt;Click to configure&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>on my initial page load I get the error:</p>
  
  <pre><code>GET http://localhost:33218/Images/ 403 (Forbidden)
  </code></pre>
  
  <p>Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.</p>
  
  <p>I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?</p>
  
  <p>In other words, I'm trying to avoid using the full path like this:</p>
  
  <pre><code>&lt;img ng-src="http://localhost:33218/Images/{{widget.initImage}}"  /&gt;
  </code></pre>
  
  <p>**** UPDATE ****</p>
  
  <p>This bit of code works, and I did not need to specify ".../../" relative path.</p>
  
  <pre><code>&lt;div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured"&gt;
      &lt;img ng-src="Images/{{widget.initImage}}"  /&gt;
      &lt;div class="caption"&gt;Click to configure&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !</p>