Product image not updating on product option selection

Technical Q&A
1

I have the following code in my themes.js.liquid file which should change the main product image depending on whether the variant thumbnail or the variant has been selected from the option dropdown, however the latter isn’t happening, Any help would be much appreciated.

/**
     * Event handler for when a variant input changes.
     */
    _onSelectChange: function _onSelectChange() {
      var variant = this._getVariantFromOptions();
      
      this.$container.trigger({
        type: 'variantChange',
        variant: variant
      });

      if (!variant) {
        return;
      }

      this._updateMasterSelect(variant);

      this._updateImages(variant);

      this._updatePrice(variant);

      this.currentVariant = variant;

      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }
    },

    /**
     * Trigger event when variant image changes
     *
     *   {object} variant - Currently selected variant
     *  {event}  variantImageChange
     */
    _updateImages: function _updateImages(variant) {
      var variantImage = variant.featured_image || {};
      var currentVariantImage = this.currentVariant.featured_image || {};
      
      if (!variant.featured_image || variantImage.src=== currentVariantImage.src) {
        return;
      }

      this.$container.trigger({
        type: 'variantImageChange',
        variant: variant
      });
    },