How to set the default image manually if the image is not available on my site using js?

Question

I want to install a dummy image manually if a specific image is not available on the site. Also, how to set if this image is deleted on the server or inaccessible, in this case I also need to display the default image using JS.

Answer 1

This is cross-browser, vanilla JavaScript and comes without any ugly onerror="" :

 var sPathToDefaultImg = 'http://lorempixel.com/150/100/abstract/2/Placeholder/'; var replaceImageWithPlaceholderIfNotAvail = function( domImg ) { // sanitize domImg if ( !domImg || !domImg.nodeName || domImg.nodeName != 'IMG' ) { // get all images from DOM aImg = document.getElementsByTagName('IMG'); i = aImg.length; if ( i ) { while ( i-- ) { replaceImageWithPlaceholderIfNotAvail( aImg[i] ); } } return; } // here is where the magic happens oImg = new Image(); // create new Image oImg.onerror = function() { // assign onerror domImg.src = sPathToDefaultImg; // handler function }; oImg.src = domImg.src; // set src of new Image }; // now you can use the function on "auto pilot" replaceImageWithPlaceholderIfNotAvail() // or feed with any domImage you like to evaluate // replaceImageWithPlaceholderIfNotAvail( domCustomImg ) 

 Available: <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo-med.png" alt="notavail1.jpg"><br> Not Available: <img src="notavail1.jpg" alt="notavail2.jpg"><br> Available: <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo-med.png" alt="notavail1.jpg"><br> Not Available: <img src="notavail2.jpg" alt="notavail4.jpg"> 

CODEPEN:

Answer 2

UPDATE Below is a custom directive version of this answer. I believe this is the best angular approach. It depends on the service defined in the original answer:

 app.directive('imageOrDefault', function (Utils) { return { restrict: 'A', link: function (scope, element, attrs) { console.log(attrs); Utils.isImage(attrs.imageOrDefault).then(function(result) { attrs.$set('src', result); }); } } }); 

You can use it in your markup as follows:

 <img image-or-default="http://r.llb.be/img/search-418.png" height="42" width="42"> 

Here is a snippet of this version.

---

Initial answer :

You can use the ng-src directive for this and a service to check if the image really exists. Here is an example of a working plunkr that you can adapt to your exact needs.

There is an isImage() function that checks the URL and returns a promise . If the URL is a valid image path, promise has resolved with that URL. If this is not the case, promise will be resolved with your default image sample.

 app.factory('Utils', function($q) { return { isImage: function(src) { var deferred = $q.defer(); var image = new Image(); image.onerror = function() { deferred.resolve('yourDefaultImagePath'); }; image.onload = function() { deferred.resolve(image.src); }; image.src = src; return deferred.promise; } }; }); 

In the markup, I use ng-src -directive to wait for a resolve promise before setting the src attribute.

 <img ng-src="{{result}}" height="42" width="42"> 

The isImage() function is called from the controller :

 app.controller('MainCtrl', function($scope, Utils) { $scope.test = function() { Utils.isImage($scope.source).then(function(result) { console.log(result); $scope.result = result; }); }; }); 

This solution easily adapts to the user directive. Let me know if you are interested in this approach.

The solution was adapted from: Angular js - isImage () - check if this image is by URL

Answer 3

You can go below:

 var $defaultImage = '...location of default image..'; 

and then check the image before loading with the ternary operator:

 var $src = empty($src) ? $src : defaultImage; // dummy code 

or create a function that will check and return the default image if the image does not exist:

 checkImageExist($loc) { check for $loc if $loc is undefined or null then return $defaulImage } 

Answer 4

You can try something like this:

 function imgError(image) { image.onerror = ""; image.src = "/images/noimage.gif"; return true; } <img src="image.png" onerror="imgError(this);"/> 

OR

 $("img").error(function () { $(this).unbind("error").attr("src", "broken.gif"); });