ItSolutionStuff.com

AngularJS Display Default Image If Original Does Not Exists Example

By Hardik Savani • November 5, 2023
Angular

We always require to check image is exists or not in given path, If not exists then we have to set default image. If we work on PHP or any framework then we check condition or something else for image exists of not to check But If you are working on AngularJS framework then we can do it using "directive".

AngularJS directive through we can simple check image is exists or not on the given url path. In this example i use ng-src and err-src attribute to manage image, directive will check ng-src url image is exists or not, if not then it will set err-src image as default.

So, I give you very basic example and you can simply understand how to use it, So let's see bellow example:

Example:

<!DOCTYPE html>

<html>

<head>

<title>AngularJS set ng src default image</title>

<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>

<body>


<div ng-app="mainApp" ng-controller="myController" id="mainController">

<img ng-src="{{realImage}}" style="width:200px" err-src="{{ myDefaultImage }}">

<img ng-src="{{noImage}}" style="width:200px" err-src="{{ myDefaultImage }}">

</div>


<script type="text/javascript">


var app = angular.module("mainApp", []);


app.controller('myController', function($scope, $timeout) {

$scope.myDefaultImage = 'http://itsolutionstuff.com/upload/Laravel-5-comman.png';

$scope.realImage = 'http://itsolutionstuff.com/upload/Laravel-mailchimp.png';

$scope.noImage = 'http://itsolutionstuff.com/upload/no-image-available.png';

});


app.directive('errSrc', function() {

return {

link: function(scope, element, attrs) {

element.bind('error', function() {

if (attrs.src != attrs.errSrc) {

attrs.$set('src', attrs.errSrc);

}

});

attrs.$observe('ngSrc', function(value) {

if (!value && attrs.errSrc) {

attrs.$set('src', attrs.errSrc);

}

});

}

}

});


</script>


</body>

</html>

Maybe it can help you...

Tags: Angular
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

AngularJS Remove Duplicates Object from Array Example

Read Now →

AngularJS - How to Create Read More/Less Toggle using Directive?

Read Now →

AngularJS Update Bind Ng-model Input Value from JQuery Example

Read Now →

How to Remove # from URL in AngularJS?

Read Now →

AngularJS Image Upload with Preview Example

Read Now →

How to Hide Div After Some Time in AngularJS?

Read Now →

How to Call Function on Page Load in AngularJS?

Read Now →

AngularJS Pagination using dirPagination Directive Example

Read Now →

AngularJS Tooltip using UI Bootstrap tpls HTML Example

Read Now →

AngularJS Simple Datepicker Directive Example Tutorial

Read Now →

AngularJS Sorting(using Orderby Filter) Table Data Example

Read Now →

How to Change Date Format using Date Filter in AngularJS?

Read Now →

AngularJS - How to Limit String Length using Filter?

Read Now →

AngularJS - How to Capitalize the First Letter of Word Example

Read Now →

How to Remove HTML Tags from String in AngularJS?

Read Now →