If you use Magento 2 WebP Images extension and have the MGS_ClaueTheme you can face the issue with the product gallery on the configurable product page, the main product image can be missing/brocken.
To fix this issue add the following code:
item['zoom'] = $(this).attr('data-zoom');
if ($(this).find('[srcset].img-responsive').length) {
item['full'] = $(this).find('[srcset].img-responsive').attr('srcset');
item['thumb'] = $(this).find('[srcset].img-responsive').attr('srcset');
item['caption'] = $(this).find('[srcset].img-responsive').attr('alt');
} else {
item['full'] = $(this).find('.img-responsive').attr('src');
item['thumb'] = $(this).find('.img-responsive').attr('src');
item['caption'] = $(this).find('.img-responsive').attr('alt');
}
to the file:
app/code/MGS/ClaueTheme/view/frontend/web/js/configurable.js
The result should be the following (before -> after):
Once you save the changes don't forget to redeploy static content and flush Magento cache, run the commands:
bin/magento setup:static-content:deploy -f
bin/magento cache:flush
Check out WebP Images Extension User Guide for more configurations and troubleshooting.