In this Magento 2 API article, I am going to explain to you how we can get the data of Magento 2 product image URL using REST API or if I will explain in simple terms then I can say how to get data from Magento 2 RESt API.
So when you are developing a native mobile application then that time you need to get the ProductImageURL from the product collection of Magento 2 using REST API.
It's needed when you need the product images URLs from your current product when you develop your application in Magento but you are using something other technology for the frontend like ReactJS, NodeJS, etc.
So it's doesn't matter why and where you are using you can easily get the product URLs from with the image on your frontend using Magento 2 REST API for product URL.
So here you have to decide your REST API route URL and by using that path you can easily hit the URL and get the data.
Get Product Image URL Custom API Module
So in order to develop this module, you have to create some basic files and as we all know most of the basic files here like: module.xml, di.xml but webapi.xml is the new file for this module.
So we will understand step-by-step custom module creation for getting ProductImageURL using REST API in Magento 2.
app/code/Wishusucess/ProductImagesUrl/registration.php
app/code/Wishusucess/ProductImagesUrl/etc/module.xml
app/code/Wishusucess/ProductImagesUrl/etc/di.xml
app/code/Wishusucess/ProductImagesUrl/etc/webapi.xml
app/code/Wishusucess/ProductImagesUrl/Model/GetProductImageUrl.php
app/code/Wishusucess/ProductImagesUrl/Api/GetProductImage.php
Step 1:
You have to register your module first by using the below registration.php file
app/code/Wishusucess/ProductImagesUrl/registration.php
<?php /** * Developer: Hemant Singh Magento 2x Developer * Category: Wishusucess_ProductImagesUrl Get ProductImageURL Using REST API * Website: http://www.wishusucess.com/ */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Wishusucess_ProductImagesUrl', __DIR__ );
Step 2:
Give your module basic information by using the below module.xml file
app/code/Wishusucess/ProductImagesUrl/etc/module.xml
<?xml version="1.0"?> <!-- /** * Developer: Hemant Singh Magento 2x Developer * Category: Wishusucess_ProductImagesUrl Get ProductImageURL Using REST API * Website: http://www.wishusucess.com/ */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Wishusucess_ProductImagesUrl" > </module> </config>
Step 3:
Now decide the preferences of your custom module by using below di.xml file
app/code/Wishusucess/ProductImagesUrl/etc/di.xml
<?xml version="1.0"?> <!-- /** * Developer: Hemant Singh Magento 2x Developer * Category: Wishusucess_ProductImagesUrl Get ProductImageURL Using REST API * Website: http://www.wishusucess.com/ */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd"> <preference for="Wishusucess\ProductImagesUrl\Api\GetProductImage" type="Wishusucess\ProductImagesUrl\Model\GetProductImageUrl" /> </config>
Step 4: Routing - Get Image URL By API
Here, you can decide the route path of your REST API by using the webapi.xml file and this file also consists of the method which you're applying over the API, so when you will use this API after complete development then you have to use this method there to get the product image urls.
app/code/Wishusucess/ProductImagesUrl/etc/webapi.xml
<?xml version="1.0"?> <!-- /** * Developer: Hemant Singh Magento 2x Developer * Category: Wishusucess_ProductImagesUrl Get ProductImageURL Using REST API * Website: http://www.wishusucess.com/ */ --> <routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../app/code/Magento/Webapi/etc/webapi.xsd"> <route url="/V1/getproductimage/:sku" method="GET"> <service class="Wishusucess\ProductImagesUrl\Api\GetProductImage" method="getProductImageUrl" /> <resources> <resource ref="anonymous" /> </resources> </route> </routes>
Step 5: Model Class To Get Product Image Rest API
This class will decide how you want to retrieve the product URL data on the frontend so here you have to implement a class like GetProductImageUrl which implements GetProductImage.
app/code/Wishusucess/ProductImagesUrl/Model/GetProductImageUrl.php
<?php
/**
* Developer: Hemant Singh Magento 2x Developer
* Category: Wishusucess_ProductImagesUrl Get ProductImageURL Using REST API
* Website: http://www.wishusucess.com/
*/
namespace Wishusucess\ProductImagesUrl\Model;
use Wishusucess\ProductImagesUrl\Api\GetProductImage;
class GetProductImageUrl implements GetProductImage
{
/**
* @var \Magento\Store\Model\App\Emulation
*/
protected $appEmulation;
/**
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;
/**
* @var \Magento\Catalog\Api\ProductRepositoryInterface
*/
protected $productRepository;
/**
* @var \Magento\Catalog\Helper\Image
*/
protected $imageHelper;
/**
* @param \Magento\Store\Model\App\Emulation $appEmulation
* @param \Magento\Store\Model\StoreManagerInterface $storeManager
* @param \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
* @param \Magento\Catalog\Helper\Image $imageHelper
*/
public function __construct(
\Magento\Store\Model\App\Emulation $appEmulation,
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
\Magento\Catalog\Helper\Image $imageHelper
) {
$this->appEmulation = $appEmulation;
$this->storeManager = $storeManager;
$this->productRepository = $productRepository;
$this->imageHelper = $imageHelper;
}
public function getProductImageUrl($sku)
{
$storeId = $this->storeManager->getStore()->getId();
$product = $this->productRepository->get($sku);
$this->appEmulation->startEnvironmentEmulation($storeId, \Magento\Framework\App\Area::AREA_FRONTEND, true);
if (!$product)
{
$response = [
[
"code" => '301',
"message" => "SKU " . $productSku . " Not Found On Magento",
],
];
return $response;
}
else
{
$image_url = $this->imageHelper->init($product, 'product_base_image')->getUrl();
$response = [
[
"product_image_url" => $image_url,
],
];
return $response;
}
$this->appEmulation->stopEnvironmentEmulation();
}
}
Step 6: Create REST API Class For Product Image URL
Now here we are using a function which is getProductImageUrl($sku) that will be processed over the SKU data.
app/code/Wishusucess/ProductImagesUrl/Api/GetProductImage.php
<?php
/**
* Developer: Hemant Singh Magento 2x Developer
* Category: Wishusucess_ProductImagesUrl Get ProductImageURL Using REST API
* Website: http://www.wishusucess.com/
*/
namespace Wishusucess\ProductImagesUrl\Api;
interface GetProductImage
{
/**
* @api
* @param string $sku
* @return array
*/
public function getProductImageUrl($sku);
}
Now, we run the following command:
php bin/magento s:up php bin/magento s:s:d -f php bin/magento c:c
Now you can check the result by using the postman, so here I am showing you the postman screenshot of how it's showing the data.
Related Post:
How To Get Category List By REST API and GraphQL In Magento 2, E.g.
Sign Up Rest API: How to Call Magento 2 Customer Sign Up Rest API, E.g.
Magento 2 Customer API: Create Custom API For Customer
Magento 2 Get Product Image URL REST API