JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- <img src="https://media.expedia.com/hotels/5000000/4580000/4574000/4573993/4573993_23_b.jpg" id="mainImage" alt="Looking out at the Pacific" width="350" height="315" class="articleImage" /> -->

<div id="mainImage" alt="Looking out at the Pacific" class="articleImage"></div>

CSS

.articleImage{
  height:315px;
  width:350px;
  background-repeat:no-repeat;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

JavaScript

var myImage = document.getElementById("mainImage");
var imageArray = [
  "https://media.expedia.com/hotels/5000000/4580000/4574000/4573993/4573993_23_b.jpg",
  "https://media.expedia.com/hotels/3000000/2790000/2781600/2781573/2781573_41_b.jpg",
  "https://media.expedia.com/hotels/1000000/60000/58400/58316/58316_467_b.jpg",
  "https://media.expedia.com/hotels/1000000/540000/533500/533436/533436_415_b.jpg",
  "https://media.expedia.com/hotels/6000000/5540000/5532900/5532837/5532837_46_b.jpg",
  "https://media.expedia.com/hotels/4000000/3820000/3814100/3814029/3814029_88_b.jpg"
];
var i = 0;
function changeImage() {
  //myImage.setAttribute("src", imageArray[i]);
  //myImage.style.backgroundImage = imageArray[i];
// myImage.style.backgroundImage = "url(" + imageArray[i] + ")";
   var image = 'url('+imageArray[i]+')';
   console.log(image);
   $('#mainImage').fadeOut(1000,function(){
   		 $(this).css('background',image).fadeIn(1000);
   });
  i++;
  if (i >= imageArray.length) {
    i = 0;
  }
}
var intervalHandle = setInterval(changeImage, 1000);

/* myImage.onclick = function() {
  alert("Now Image will not animate");
  clearInterval(intervalHandle);
}; */