Preventing image from rendering in AngularJs

Question

I have this jsFiddle: http://jsfiddle.net/HMZuh/1/

Which contains this html

<div ng-app ng:controller="ShowHideController">
    <div ng-show='showMe'>
        <img ng-src="{{imageSource}}"/>
    </div>
    <button ng-click='showImage()'> show image </button>
<div>

and this script:

function ShowHideController($scope) {
    $scope.showMe = false;

    $scope.imageSource = '';

    $scope.showImage = function(){
        $scope.showMe = true;
        $scope.imageSource = 'https://www.google.com/images/srpr/logo3w.png';
    }
}

I'm getting a 404, image not found when the source has not yet been set, is there any way of preventing this when showMe is false?

Not having this problem - wondering if it's a browser issue. What browser are you trying this with? — Roy Truelove
– Roy Truelove, Commented Sep 10, 2012 at 15:48
Sorry mate, tried this on a local project from scratch, never got the 404. — Roy Truelove
– Roy Truelove, Commented Sep 10, 2012 at 20:34

Ivan Dyachenko · Accepted Answer · 2012-09-11 13:03:11Z

3

To solve this you can:

Use ng-repeat http://jsfiddle.net/bGA4T/
Use $compile and declare your own directive
Write your own ng-src directive
...

I think there are many ways to solve this.

answered Sep 11, 2012 at 13:03

Ivan Dyachenko

1,3489 silver badges16 bronze badges

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

1 Comment

Hugo Forte Over a year ago

Thanks, I ended up using ng-repeat which 'solved' the issue. Not quite what I would have liked, but it worked=)

Mick MacCallum · Accepted Answer · 2014-11-12 19:27:03Z

3

I improved on this by using ui-if from http://angular-ui.github.com/ Instead of hiding/showing using ng-hide/ng-show, ui-if simply does not render the element.

<div ui-hide='ImageHasBeenUploaded'>
    <img ng-src='/some/image/path/{{imageName}}/>
</div>

edited Nov 12, 2014 at 19:27

Mick MacCallum

130k40 gold badges283 silver badges284 bronze badges

answered Sep 25, 2012 at 14:33

Hugo Forte

6,0085 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

Preventing image from rendering in AngularJs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related