JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test_1"></div>
<div id="test_2"></div>

CSS

body{
  margin: 0px;
  padding: 0px;
  border: none;
  font-family: Arial;
  font-size: 16px;
  color: #1f2227;
  background-color: silver;
}
#test_1, #test_2{
  position: absolute;
  width: 50%;
  height: 100%;
  background-repeat: no-repeat;
}
#test_1{ left: 0; }
#test_2{ right: 0; }

JavaScript

var urlGoodImage = 'https://png-images.ru/wp-content/uploads/2015/02/girls_PNG6437.png';
var urlBadImage = 'https://png-images.ru/wp-content/uploads/3078/59/girls_PNG666.png';

checkPath(urlGoodImage).then(function(value){
  $('#test_1').css({
    'background-image': 'url(' + value + ')',
  });
})

checkPath(urlBadImage).then(function(value){
  $('#test_2').css({
    'background-image': 'url(' + value + ')',
  });
})


function checkPath(url){
	var urlBungIamge = 'https://cdn.iconscout.com/icon/free/png-256/data-not-found-1965034-1662569.png';
 	var def = $.Deferred();
  
  var img = new Image();
  img.src = url;
  img.onload = function(){
    def.resolve(url);
  };
  img.onerror = function(){
  	def.resolve(urlBungIamge);
  };
  
	return def;
}