JSFiddle - React, Tailwind, and code Playground

HTML

<img src="1.svg" onerror="this.onerror=null; this.src='http://placehold.it/200x200/1.png'; this.className+=' myclass';" class="image" id="1" />

CSS

.myclass {
	margin-left:50px;	
}

JavaScript

$(function() {
    $(".myclass")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "hover.png";
        $(this).attr("src", src);
        //console.log("moused over");
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("hover.png", ".png");
        $(this).attr("src", src);
        //console.log("moused out");
    });
});