How to get product image in Opencart in js?

Question

JavaScript

I remade the mini cart in the header on the default Opencart 3 template and instead of the image I put a stub on hover over which the main product image pops up, but I can’t get the path to the product image in the script. Since this is a basket, there can be several products and, accordingly, when you hover over your stub, your product image should pop up, below I added part of the code

<div class="small-img" style="border-radius:10px;padding-top:5px;background:white;position:absolute;display:none;z-index:10005;box-shadow:0 0 10px rgba(0,0,0,0.5);width:120px;height:110px;max-width:120px;max-height:110px;text-align:center;overflow:hidden;left: 50px;"></div>
<td class="text-center">
      {% if product.thumb %} 
      <a href="{{ product.thumb }}" title="{{ product.name }}" target="blank" onmouseover="show_small_img(event, '{{ product.thumb }}');" onmouseout="$('.small-img').hide();"><img src="image/image_product.png" width="16"></a>
      {% endif %}
</td>

function show_small_img(image){
$('.small-img').html('<img src="тут путь до изображения" style="height:100px;width: 100px;">');
$('.small-img').css({"width": "120px", "text-align":"center"});
$('.small-img').show();
}

Answer 1

onmouseover="show_small_img('{{ product.thumb }}');"

function show_small_img(image){
$('.small-img').html('<img src="'+image+'" style="height:100px;width: 100px;">');
$('.small-img').css({"width": "120px", "text-align":"center"});
$('.small-img').show();
}