Magento – Product images returning 404 after updating Magento 2

The logic of loading a product image from the front-end involves Magento looking for /media/catalog/product images within the front-end instance. If there is an image within the instance, it will then try to create and load the cached version (at which point the CDN will come into play).

However, since the product images are uploaded to the backend - they won't exist in the front-end instance. magento then decided this product doesn't have an image and use placeholder image instead.

To counter this issue, what you need is a system script that sync/push the content of media folder from the backend to the frontend.

You might be looking for a solution like this

https://gist.github.com/alotaiba/913313

In etc/view.xml of your current theme, you can update product image size

Make sure you resize with the expect ratio.

Use additional tag <frame> to prevent white borders on image. Use this code as example:

<image id="product_page_main_image" type="small_image">
    <width>460</width>
    <height>460</height>
    <aspect_ratio>true</aspect_ratio>
    <frame>false</frame>
</image>

Check all other tags, not just a tag with the id product_page_main_image check others too.

<frame>false</frame> was an issue in previous versions, it was not working in old 2.x versions and reported earlier

Note: If you still getting white border issue, then you need to use the below fix until it's offically released:

After creating a plugin to convert the string value to an integer (which properly casts to a boolean), the image frame is not added. For details see this

public function beforeSetKeepFrame($image, $keep)
{
    if (is_string($keep)) {
        $keep = (strtolower($keep) === 'true') ? 1 : 0;
    }
    return [$keep];
}