JSFiddle - React, Tailwind, and code Playground

HTML

<!-- <img src="img/image1.png" id="mainimage"> -->
<div id="mainimage">img/image1.png</div>

<p><a href="#" id="pet1">Dog</a></p>
<p><a href="#" id="pet2">Cat</a></p>

CSS

img {
    width: 200px;
    height: 200px;
}

JavaScript

var $mainImage = $('#mainimage'),
        originalImageSrc = $mainImage.text(); // originalImageSrc = $mainImage.attr('src');
    
    $('a')
        .on('mouseover', function() {
            var newImageSrc = 'img/' + $(this).attr('id') + '.jpg';
            $mainImage.text(newImageSrc); // $mainImage.attr('src', newImageSrc);
        })
        .on('mouseout', function() {
            $mainImage.text(originalImageSrc); // $mainImage.attr('src', originalImageSrc);
        });