product-swatches.liquid

<script>
  function updatePDPSwatches() {
    document.querySelectorAll("input[type='radio']").forEach(input => {
      let imageUrl = input.dataset.variantImage;
      let label = input.nextElementSibling;
      let swatch = label?.querySelector(".swatch");
      if (imageUrl && swatch && label) {
        swatch.style.backgroundImage = `url('${imageUrl}')`;
        swatch.style.backgroundSize = "cover";
        swatch.style.backgroundPosition = "center";

        swatch.style.width = "100px";
        swatch.style.aspectRatio = "2";

        swatch.style.setProperty("--swatch-input--border-radius", "0");
        label.style.setProperty("--swatch-input--border-radius", "0");
      }
    })
  }

  document.addEventListener("DOMContentLoaded", () => {
    updatePDPSwatches()
  })

  document.addEventListener("PDP:updated", () => {
    updatePDPSwatches()
  })

</script>

you need to add the variant image url in input by adding this property in swatch-input.liquid

data-variant-image="{{ value.variant.featured_image | image_url: width: 200 }}"

then you also need to dispatch the event in renderProductInfo function in product-info.js
like this:

document.dispatchEvent(new CustomEvent("PDP:updated"))