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?

​

Answer 1

To solve this you can:

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

I think there are many ways to solve this.

Answer 2

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>