JSFiddle - React, Tailwind, and code Playground

HTML

<span data-oe-model="product.template" data-oe-id="2" data-oe-field="image_1920" data-oe-type="image" data-oe-expression="product.image_1920" class="d-flex h-100 justify-content-center align-items-center"> <img src="https://via.placeholder.com/100x100?text=1" class="img img-fluid" alt="A4Tech Bloody V8M" /></span>

JavaScript

let image = document.querySelector('span[data-oe-id="2"] img');

image.addEventListener("mouseover", function( event ) {   
  // highlight the mouseenter target
  event.target.src = "https://via.placeholder.com/100x100?text=2";
}, false);