Magento2 : get image path of product

Question

I created custom page for getting products . I got all information but how to get full image path. I am using getImage() it is showing image only how to get full path.

      <a href="<?php echo $this->getBaseUrl().$_item->getUrlKey();?>" title="<?php echo $_item->getName() ?>" class="product-image"><img src="<?php echo $this->getImage();?>" alt="<?php echo $_item->getName() ?>" />

Answer 1

Please use the code below in your template file :

$imageBlock =  $block->getLayout()->createBlock('Magento\Catalog\Block\Product\ListProduct');
$productImage = $imageBlock->getImage($product, 'category_page_grid');  /* $product pass product object here */
<a href="<?php echo $product->getProductUrl(); ?>"><?php echo $productImage->toHtml()  ?></a> asdasdfs

Answer 2

If you only want to get the image URL without having to render the full image HTML code, and without calling multiple blocks, you can do this way :

$imageUrl = $product->getMediaConfig()->getMediaUrl($product->getImage());
// Returns "https://www.example.com/media/catalog/product/y/o/your_image.jpg"

Answer 3

Get the image URL with

$image->getImageUrl();

or if you want to output it as element:

echo $image->toHtml();

OR Try this :

$store = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore();
$imageUrl = $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'catalog/product' . $product->getImage();

Note: you need to create objectmanager if use last solution.

Answer 4

One thing you need to keep in mind when getting a custom collection of products is how you filter the collection to have a values you need to be called on the front end. You say you have a custom page, so i will assume that you are creating a custom collection as well.

When you do you have to filter out what you will need. Inside you're block class, you will need something like this:

<?php

namespace Vendor\Namespace\Block;

use Magento\Catalog\Model\Product;

class Custompage extends \Magento\Framework\View\Element\Template {

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $productCollectionFactory,
        \Magento\Catalog\Model\Product\Visibility $catalogProductVisibility,
        array $data = []
    ){
        $this->_productCollectionFactory = $productCollectionFactory;
        $this->_catalogProductVisibility = $catalogProductVisibility;
        parent::__construct($context, $data);
    }

    public function getProductCollection() {       
        $attrId = $this->getAttrId();
        $collection = $this->_productCollectionFactory->create();
        $collection->setVisibility($this->_catalogProductVisibility->getVisibleInCatalogIds());
        $collection->addFieldToSelect('name');
        $collection->addFieldToSelect('price');
        $collection->addFieldToSelect('small_image');

        return $collection;
    }
}

Take note that we have $collection->addFieldToSelect('small_image'); as a field to select from. If you don't do this, when you pass the call to getImage() the product object won't have the image url (and this is hard to see as the m2 objects are huge and hard to var_dump). So you would end up with a value of NULL coming back when you call for the image url.

Then in your template you can use:

<?php $productCollection = $block->getProductCollection(); ?>
<?php $imageBlock =  $block->getLayout()->createBlock('Magento\Catalog\Block\Product\ListProduct'); ?>
<?php if (count($productCollection)): ?>
    <?php foreach ($productCollection as $product): ?>
        <?php $productImage = $imageBlock->getImage($product, 'category_page_grid'); ?>
        <a href="<?php /* @escapeNotVerified */ echo $product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1"><?php echo $productImage->toHtml(); ?></a>   
    <?php endforeach; ?>
<?php endif; ?>

Answer 5

Have a look at how it achieved in magento at product/view page

Magento\Catalog\Block\Product\View\Gallery

/**
 * Retrieve collection of gallery images
 *
 * @return Collection
 */
public function getGalleryImages()
{
    $product = $this->getProduct();
    $images = $product->getMediaGalleryImages();
    if ($images instanceof \Magento\Framework\Data\Collection) {
        foreach ($images as $image) {
            /* @var \Magento\Framework\DataObject $image */
            $image->setData(
                'small_image_url',
                $this->_imageHelper->init($product, 'product_page_image_small')
                    ->setImageFile($image->getFile())
                    ->getUrl()
            );
            $image->setData(
                'medium_image_url',
                $this->_imageHelper->init($product, 'product_page_image_medium_no_frame')
                    ->setImageFile($image->getFile())
                    ->getUrl()
            );
            $image->setData(
                'large_image_url',
                $this->_imageHelper->init($product, 'product_page_image_large_no_frame')
                    ->setImageFile($image->getFile())
                    ->getUrl()
            );
        }
    }

    return $images;
}

where $_imageHelper is:

/**
 * @var \Magento\Catalog\Helper\Image
 */
protected $_imageHelper;