I have this jsFiddle: /

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 = '.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?

​

I have this jsFiddle: http://jsfiddle/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./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?

​

• javascript
• jquery
• angularjs

• Not having this problem - wondering if it's a browser issue. What browser are you trying this with? – Roy Truelove Commented Sep 10, 2012 at 15:48
• I tried it on chrome and firefox - both latest versions – Hugo Forte Commented Sep 10, 2012 at 19:26
• Sorry mate, tried this on a local project from scratch, never got the 404. – Roy Truelove Commented Sep 10, 2012 at 20:34

2 Answers 2

To solve this you can:

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

I think there are many ways to solve this.

I improved on this by using ui-if from http://angular-ui.github./ 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>