Geek asks and answers

Preventing image rendering in AngularJs

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

What does this html contain

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

and 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 get 404, the image was not found when the source is not yet installed, is there a way to prevent this when showMe is false?

+5
source share
2 answers

I improved this using ui-if from http://angular-ui.github.com/ Instead of hiding / showing with ng-hide / ng-show, ui-if just doesn't display the element.

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

To solve this problem, you can:

, .

+3

More articles:


All Articles