JSFiddle - React, Tailwind, and code Playground

HTML

<div class="team-member" style="display: block; background-image:url('/img/ajax-loader.gif');" >
 <img style="display: none; " src="http://placehold.it/200x200 " data-arrow-up-right>
  <img style="display: none " src="http://placehold.it/200x200 " data-arrow-down-left>
  <img style="display: none; " src="http://placehold.it/200x200 " data-arrow-down-right>
  <img style="display: block; " src="http://placehold.it/200x200 " data-arrow-center>
</div>

<div class="team-member" style="display: block; background-image:url('/img/ajax-loader.gif');" >
 <img style="display: none; " src="http://placehold.it/200x200 " data-arrow-up-right>
  <img style="display: none " src="http://placehold.it/200x200 " data-arrow-down-left>
  <img style="display: none; " src="http://placehold.it/200x200 " data-arrow-down-right>
  <img style="display: block; " src="http://placehold.it/200x200 " data-arrow-center>
</div>

<div class="team-member" style="display: block; background-image:url('/img/ajax-loader.gif');" >
 <img style="display: none; " src="http://placehold.it/200x200 " data-arrow-up-right>
  <img style="display: none " src="http://placehold.it/200x200 " data-arrow-down-left>
  <img style="display: none; " src="http://placehold.it/200x200 " data-arrow-down-right>
  <img style="display: block; " src="http://placehold.it/200x200 " data-arrow-center>
</div>

JavaScript

function swapImage(){

var elem = $('.team-member img:last-child');
if (!elem.prop('complete')) {
  console.log("Waiting to be loaded!");
  elem.on('load', function() {
    elem.parent().css('background-image', elem.attr('src'));
  });
} else {
  elem.parent().css('background-image', elem.attr('src'));
}

}

swapImage();