JSFiddle - React, Tailwind, and code Playground

by Oscar 11

HTML

<div id="image"></div>

JavaScript

var json = {
		"Hotel": [{
				"ImageUrl": "http://us.dotwconnect.com/poze_hotel/110802-img1-1.jpg"
			}, {
				"ImageUrl": "http://www.google.com/images/srpr/nav_logo14.png"
			}]
	};
	
	var totalHotel = json.Hotel.length;

	var image = '';
	for(var i=0;i<totalHotel;i++){
		
		hotelImage = json.Hotel[i].ImageUrl;
	
		

		// The "callback" argument is called with either true or false
		// depending on whether the image at "url" exists or not.
		function imageExists(url, callback) {
		  	var img = new Image();
		  	img.onload = function() { callback(true); };
		  	img.onerror = function() { callback(false); };
		  	img.src = url;
		}

		// Sample usage
		var imageUrl = hotelImage;
		imageExists(imageUrl, function(exists) {
		  	// console.log('RESULT: url=' + imageUrl + ', exists=' + exists);
		  	 if(!exists){
		  		console.log('RESULT: url=' + imageUrl + ', exists=' + exists);
		  		hotelImage = 'https://az853139.vo.msecnd.net/static/images/not-found.png';
		  	}

		});

		image += '<img style="width:180px; height:120px; margin:9px;" src="'+hotelImage+'" />';

		
	}
	// console.log(image);
	$('#image').html(image);