Preventing img from loading in angularjs

Question

I have a div with an image:

<div ng-if="showIt">
    <img src="{{filepath}}/{{filename}}">
    <!-- ... and a bunch other other elements -->
</div>

The thing is {{filepath}} and {{filename}} will be null if showIt is false.

However, I always see a 404 error in my console because I think Angularjs is rendering the whole DOM, and then removing the bits where ng-if evaluates to false. This means the browser will always request the non-existent images even when showIt is false.

Is there a way prevent the DOM from creating that entire div block, so that the non-existent images will never be requested by the browser?

JB Nizet · Accepted Answer · 2015-04-20 21:57:13Z

8

Use ng-src:

<img ng-src="{{filepath}}/{{filename}}">

The 404 errors you see aren't caused by ng-if. They're caused by the fact that the browser tries to load the image before the angular expression is evaluated by Angular. ng-src only adds the src attribute to the image once the expression is evaluated, avoiding HTTP requests to {{filepath}}/{{filename}}.

answered Apr 20, 2015 at 21:57

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

Preventing img from loading in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related