JSFiddle - React, Tailwind, and code Playground

HTML

<div class="library-layout">
	<img src="http://via.placeholder.com/350x350">
		</div>

CSS

img {
  opacity: 0.5;
}

.library-layout {
	float: left;
	height: 0;
  padding-bottom:40%;
	background-image: url('http://www.83photography.co.uk/ajax-loader.gif');
  background-repeat: no-repeat;
  background-position: center;
  transition: background 1s linear;
 }

JavaScript

$(document).ready(function(){
document.getElementById(".library-layout").style.backgroundImage = "url(http://www.83photography.co.uk/ajax-cover.jpg)";
});