AngularJS ng-src path to image

Question

Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:

<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
    <img ng-src="../../Images/{{widget.initImage}}"  />
    <div class="caption">Click to configure</div>
</div>

on my initial page load I get the error:

GET http://localhost:33218/Images/ 403 (Forbidden)

Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.

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 ?

In other words, I'm trying to avoid using the full path like this:

<img ng-src="http://localhost:33218/Images/{{widget.initImage}}"  />

**** UPDATE ****

This bit of code works, and I did not need to specify ".../../" relative path.

<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
    <img ng-src="Images/{{widget.initImage}}"  />
    <div class="caption">Click to configure</div>
</div>

In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !

Answer 1

Change you code to following.

You need to check widget.initImage is initialized or not. Before passing it to ng-src .

Use ng-if on widget.initImage

<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
                <img ng-src="../../Images/{{widget.initImage}}"  ng-if="widget.initImage" />
                <div class="caption">Click to configure</div>
  </div>