Magento – Avoid loading product image from cache in 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

try:

define image size in app\design\frontend\MyPackage\mytheme\etc\view.xml as

<image id="my_widget_image_size" type="small_image">
    <width>240</width>
    <height>360</height>
</image>

then your function:

public function getPImage()
    {
     $col=$this->getCollection();
     $image = 'my_widget_image_size';
     foreach ($col as $product)
     {
        $productImage = $block->getImage($product, $image);
        echo $productImage ->toHtml();
     }  
    }

This will give you the entire image HTML. So don't put this inside img src.

Update: Get image url:

If above method did not work for you try this one.

public function getPImage()
        {
         $col=$this->getCollection();
         $image = 'my_widget_image_size';
         foreach ($col as $product)
         {
            $productImage = $block->getImage($product, $image);
            $_imagehelper = $this->helper('Magento\Catalog\Helper\Image');
            $productImage = $_imagehelper->init($product, $image)->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(400)->getUrl();
            echo $productImage;
         }  
        }