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:


The result should be the following (before -> after):

Magento 2 Media Gallery Issue with WebP

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.