Magento 2 Change Minicart Product Image from thumbnail to regular image

Question

After editing the minicart for a couple of days now i've noticed that the images are smaller versions of the images that you would see on the product pages. This means as i'm upscaling them to fit a larger container they are losing quality.

The file containing the image reference is within Magento_Catalog/web/template/product/image_with_borders.html although the image src is set like so:

data-bind="attr: {src: src, alt: alt}

I don't really know how I would go about changing the image src but I imagine there is another file somewhere where this references to but I can't find it. Any help appreciated.

Answer 1

Try this,

You can edit view.xml in the below path

app/design/{Package}/{Theme-name}/etc/view.xml

add the below code in it

<image id="mini_cart_product_image" type="image">
            <width>100</width>
            <height>100</height>
</image>

you can change the image type and width/height as per your need

type - It means what type of image should display in the respective places in the frontend.

Explanation:

1. image – corresponds to the Base Image role
2. small_image – corresponds to the Small Image role
3. swatch_image – corresponds to the Swatch Image role
4. swatch_thumb – corresponds to the Swatch Image role
5. thumbnail – corresponds to the Thumbnail Image role

For more information Look at this

Hope this helps

Answer 2

In this topic we will do How to Change Product Image in Minicart

Step 1: Create di.xml file

Step 2: Create Image.php file

Product image in minicart will getten to show by function doGetItemData() in Magento\Checkout\CustomerData\DefaultItem class but this function is protected, so we cannot use plugin on it. Instead, it extends from Magento\Checkout\CustomerData\AbstractItem and use function getItemData()

First We need to create registration and module file as per structure of magento 2 then follow below steps.

Step 1: Create di.xml file

Create di.xml file in app/code/[Name_Space]/[Your_Module]/etc/frontend

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\CustomerData\AbstractItem">
     <plugin name="Change_Product_Image_In_Minicart" type="[Name_Space]\[Your_Module]\Plugin\Minicart\Image" sortOrder="1"/>
</type>
</config>


Step 2: Create Image.php file

Create Image.php file in app/code/[Name_Space]\[Your_Module]\Plugin\Minicart

<?php

namespace [Name_Space]\[Your_Module]\Plugin\Minicart;

class Image
{

    public function aroundGetItemData($subject, $proceed, $item)
    {

        $result = $proceed($item);

        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        $product = $objectManager->create('Magento\Catalog\Model\Product')->load($result['product_id']);

        /* thum url */ 
        $storeManager = $objectManager->create('Magento\Store\Model\StoreManagerInterface'); 
        $currentStore = $storeManager->getStore();
        $mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

        if($product->getThumbnail()){
            $result['product_image']['src'] = $mediaUrl.$product->getThumbnail();
        }
        else{
            $result['product_image']['src'];
        }
        return $result;
    }
}