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 ? stackoverflow.com/questions/27880972/… — PSL
– PSL, Commented Jan 13, 2015 at 19:14

dhavalcengg · Accepted Answer · 2015-01-13 19:21:43Z

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, 2015 at 19:21

answered Jan 13, 2015 at 19:16

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

PSL Over a year ago

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 stackoverflow.com/questions/27880972/…

bob.mazzo Over a year ago

I'm using angular-1.3.5, and I think my problem is what dhavalcengg said. It may not be initialized upon reload.

PSL Over a year ago

@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 Over a year ago

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?

micronyks · Accepted Answer · 2015-01-13 19:34:52Z

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, 2015 at 19:34

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

1 Comment

PSL Over a year ago

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

Collectives™ on Stack Overflow

AngularJS ng-src path to image

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related