JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<img src="https://www.w3schools.com/images/w3schools_green.jpg" id="featured" />

JavaScript

$('img#featured').on('click', function() {
     var src = $(this).prop('src');
     if (src.indexOf(".jpg") > -1) {
         src = src.replace('.jpg','.webp' );
     } else {
         src = src.replace('.gif','.jpg' );
     }
     $(this).prop('src', src);
});