JSFiddle - React, Tailwind, and code Playground

HTML

<img prc="http://lorempixel.com/800/200/sports/1/" class="visible-lg">
<img prc="http://lorempixel.com/400/200/sports/1/" class="visible-md">
<img prc="http://lorempixel.com/200/200/sports/1/" class="visible-sm">

CSS

*[class^="visible-"] {display: none;}

@media screen and (min-width: 1000px) {
    .visible-lg {display: block;}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
    .visible-md {display: block;}
}
@media screen and (max-width: 499px) {
    .visible-sm {display: block;}
}

JavaScript

var prcsrc = function(){
    $('img[prc]:visible').each(function(){
        $(this).attr('src', $(this).attr('prc')).removeAttr('prc');
    });
}
prcsrc();
setInterval(prcsrc, 2000);