JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="ib--border">

	<div class="ib">

        <img data-src="Ronseal.jpg" class="ib_img">

	</div>

</div>


<div class="ib--border">

	<div class="ib">

        <img data-src="DeWalt.gif" class="ib_img">

	</div>

</div>


<div class="ib--border">

	<div class="ib">

        <img data-src="SpingDeals.jpg" class="ib_img">

	</div>

</div>

JavaScript

function swapImgTest() {

    var imgs = $('img.ib_img');
    var bw = $(window).width();

    imgs.each(function()    {
    
        var imgName = $(this).data('src');
        
        if (bw < 641) {
           $(this).attr('src', 'assets/img/image-banners/sm/' + imgName);
       } else if (bw > 640 && bw < 1025) {
           $(this).attr('src', 'assets/img/image-banners/md/' + imgName);
       } else {
           $(this).attr('src', 'assets/img/image-banners/lg/' + imgName);
       }
        
    });

}

swapImgTest();
$(window).on('resize', swapImgTest);