Изменение изображения в теге span в odoo без идентификатора изображения

Question

Мне нужно изменить картинку при наведении курсора мыши. У меня есть этот код внутри odoo на вкладке продуктов в магазине:

<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="/web/image/product.template/2/image_256/A4Tech%20Bloody%20V8M?unique=0a360e4" class="img img-fluid" alt="A4Tech Bloody V8M"/></span>

И единственное, что меняется между продуктами, - это data-oe-id. Проблема в том, что только тег span, внутри которого находится изображение, имеет некоторый разумный идентификатор. Но имидж - нет. Итак, думаю, я не могу использовать getelementbyid.

Дополнительный вопрос - Как мне извлечь имя gif из базы данных, если я использую odoo, и это новый модуль. Кроме того, если это возможно, как я могу вызвать функцию javascript из модуля odoo.

Answer 1

https://jsfiddle.net/jy51ascu/

HTML (только измененное изображение):

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

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

<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>