Change image when changing variant

Shopify Discussion
,
1

Hello I’m coding this bundle:

Schermafbeelding 2025-01-31 122815.png
Schermafbeelding 2025-01-31 122815.png1918×1078 397 KB

and I want to update the product image when changing variant so I added this code:

document.addEventListener('DOMContentLoaded', () => {
  const volumeDiscountHandler = new VolumeDiscountHandler();
  
  const variantSelectors = document.querySelectorAll('.variant-selector');
  variantSelectors.forEach((selector) => {
    selector.addEventListener('change', (e) => {
      const variantId = e.target.value;  // Get the selected variant ID
      console.log("Variant ID selected: ", variantId);  // Debugging

      // Get the variant data (assumes you have the product object available)
      const variant = volumeDiscountHandler.getVariantById(variantId);
      if (variant) {
        const imageUrl = variant.image ? variant.image.src : null;
        console.log("Variant Image URL: ", imageUrl);

        // If an image exists, update the product image display
        if (imageUrl) {
          const productImageElement = document.querySelector('.product-image');
          if (productImageElement) {
            productImageElement.src=imageUrl; // Update the image source
          }
        }
      }
    });
  });
});

It gives the correct logs of variant ids:
Variant ID selected: 49834604134739
volume-discount-handler.js:209 Variant ID selected: 49834604200275

But it does not update the product image, does anyone know how to fix this?