Show placeholder image until actual image is loaded inside ng-repeat angularjs

Just use ng-src and delete src="{{image.src}}"

<div class="image-container" ng-repeat="image in images"> <img class="img-rounded" ng-src="{{image.src}}" ng-image-appear responsive transition-duration="1s" animation="fillIn" animation-duration="1s" placeholder easing="ease-out" /> </div> 

You can see a working example here https://jsfiddle.net/wLqzwvLh/2/ which is based on in their ng-repeat example http://arunmichaeldsouza.github.io/ng-image-appear/examples/ng-repeat.html

HTML

<div ng-app="myApp" ng-controller="appCtrl" class="container"> <div class="row"> <div class="col-sm-3" ng-repeat="url in images"> <img ng-src="{{url}}" class="img-responsive" ng-image-appear responsive animation="bounceIn" animation-duration="1s" /> </div> </div> </div> 

JS

var myApp = angular.module('myApp', ['ngImageAppear']); myApp.controller('appCtrl', ['$scope', function($scope) { $scope.images = [ 'http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Full-HD-Wallpapers-1080p-1.jpg', 'http://www.onlyhdpic.com/images/Collections/hd-pics-photos-nature-fish-tree.jpg', 'http://www.planwallpaper.com/static/images/6982679-1080p-wallpapers-hd.jpg', 'https://newevolutiondesigns.com/images/freebies/hd-wallpaper-40.jpg' ]; }]); 

This will work perfectly :

 app.directive('dummyimage', function() { return { restrict: 'A', scope: { dummyimage: '@' }, link: function(scope, element, attrs) { element.one('load', function() { element.attr('src', scope.dummyimage); }); } }; }); 

and in image tag write this :

<img dummyimage="loading-image.gif" src="{{realImage}}" /> 

It will show "loading-image.gif" until real image is loaded.