How to get product image url in Magento 2?

In the e-Commerce Site, Each Product contains unique images like Small Images, Base images, and thumbnail images.

Many times in custom development we need to required get the product URL in Magento 2. If you are developing some features related to images and want to retrieve the image URL, You can achieve the image full URL by referring to this article.

If you are dealing with PWA stuff and want to fetch the product image URL by GraphQL, Get Product Image URLs with GraphQl

You can fetch all the media galleries by link, Gallery Images Collection. We can get product URLs using Magento way by just simple way,

<?php
public function __construct(
    \Magento\Catalog\Helper\Image $imageHelper,
    \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
) {
    $this->imageHelper = $imageHelper;
    $this->productRepository = $productRepository;
}

/**
 * @param int $id
 * @return string
 */
public function getItemImage($productId)
{
    try {
        $_product = $this->productRepository->getById($productId);
    } catch (NoSuchEntityException $e) {
        return 'product not found';
    }
    $image_url = $this->imageHelper->init($_product, 'product_base_image')->getUrl();
    return $image_url;
}

You can call any image type at the above function in the second argument, There are many default image_types available.
Few of Example,
product_base_image(265×265)
product_page_image_large (700×700)
product_page_image_medium (700×700)

You can get the image type from vendor/magento/theme-frontend-blank/etc/view.xml as per your requirements.

In phtml file call like this, by just passing product id to get an image of the specific product,

<?php
$productId = 10;
$imgUrl = $this->getItemImage($productId);
?>
<div class="image-box"><img src="<?= $imgUrl; ?>" alt="product-image"/></div>

Image URL with HeightxWidth equals 265×265 got as a response to the above example.

You can read the article Resize Images and Retrieve the Placeholder of the image by Programmatically fetching the placeholder image.

Share this:

Related