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 !

What angular version you are using and are you setting `widget.initImage` asyncronously? Does this answer help ? http://stackoverflow.com/questions/27880972/why-am-i-getting-a-404-error-with-ng-src-even-though-image-is-appearing/27881056#27881056 — PSL, Jan 13 '15 at 19:14

dhavalcengg · Accepted Answer · 2015-01-13T19:21:43.867

5

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>

edited Jan 13 '15 at 19:21

answered Jan 13 '15 at 19:16

dhavalcengg

4,678
1
17
25

Yeah looks like this hack should resolve the issue with 1.2.x angular. However 1.3.x they have fixes ng-src. Explanation can be found in this answer http://stackoverflow.com/questions/27880972/why-am-i-getting-a-404-error-with-ng-src-even-though-image-is-appearing/27881056#27881056 – PSL Jan 13 '15 at 19:24
I'm using angular-1.3.5, and I think my problem is what dhavalcengg said. It may not be initialized upon reload. – bob.mazzo Jan 13 '15 at 19:26
2

@bob 1.3.5 uses interpolate with `all or nothing` flag, so ng-src does not render src until the interpolations are resolved. It should just work fine without this hack though if you look at the demos in my answer. Anyways glad you got your issue anyways. I just thought of providing additional info, thats all. – PSL Jan 13 '15 at 19:29
1

I just checked, it should just work fine without ng-if hack for 1.3.5. btw are you initializing `widget.initImage` to empty string or something before loading the actually loading the real value? – PSL Jan 13 '15 at 19:35

score 2 · Answer 2 · answered Jan 13 '15 at 19:34

2

I'd suggest you to use ng-init directive like this...

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

In your controller,

$scope.getImgUrl=function()
{
    $scope.myImgUrl=  //get your img url whatever it is...

    // You can also set widget.showInitImage variable here as well...
}

answered Jan 13 '15 at 19:34

micronyks

54,797
15
112
146

1

`The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.` <-- **[See](https://docs.angularjs.org/api/ng/directive/ngInit)** – PSL Jan 13 '15 at 19:36

AngularJS ng-src path to image

2 Answers2

Linked