Magento – Images are not loading after upgrade to Magento 2.3.0

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

You need to set image sizes in view.xml file inside your theme

Code would be like this:

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="bundled_product_customization_page" type="thumbnail">
                <width>140</width>
                <height>140</height>
            </image>
            <image id="cart_cross_sell_products" type="thumbnail">
                <width>200</width>
                <height>248</height>
            </image>
            <image id="cart_page_product_thumbnail" type="small_image">
                <width>165</width>
                <height>165</height>
            </image>
            ........
        </images>
    </media>
    ......
</view>

Make sure your all images sizes are 1:1 ratio, as your main image proportion is 1:1 in ratio, than after frontend deployment it should work

php bin/magento setup:static-content:deploy -f