JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>

CSS

body::after{
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}
.myimage {
height:500px;
width:500px;
transition: background-image 1s linear;
background-image:url('https://placeimg.com/1648/1488/any');
  

background-size:cover;
}

JavaScript

var duration = 2500;
var delay = 500;
var i = 0; 
    
setInterval(function() {
		
		if(i == 0) {
			$(".myimage").css("background-image","url('https://placeimg.com/1640/1480/any')");
		}

        if(i == 1) {
			$(".myimage").css("background-image","url('https://placeimg.com/1640/1481/any')");
		}

		if(i == 2) {
			$(".myimage").css("background-image","url('https://placeimg.com/1640/1482/any')");
		}

		if(i == 3) {
			$(".myimage").css("background-image","url('https://placeimg.com/1640/1483/any')");
		}
    
	i=i==3?0: i+1;

	}, duration+delay)