Magento2: Get Media URL In Template File (Without direct Calling Object Manager )

Question

How to Get Media URL in Template file ? All the solution i found is calling Object Manager directly. My another concern, Can you ever call object manager directly as best practice ? (because in most of the solution they are using object manager)

Answer 1

You can get media url in your template file using below way but without using objectmanager you must have to define Block file with __construct() method with define storeManagerInterface in construct method.

In your phtml Block file create __construct function.

public $_storeManager;

public function __construct(\Magento\Store\Model\StoreManagerInterface $storeManager)
{
       $this->_storeManager = $storeManager;
}

In your phtml file call below method to get media url:

$mediaUrl = $this ->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

echo $mediaUrl;

This is the proper way to get media url in Magento 2.

Answer 2

As of 2.1, there is no direct way of getting the media URL without either:

• calling the object manager directly (please don't do that)
• override the block and add a new method

Rakesh mentioned one way of doing it.

Another way is to use the protected variable $_urlBuilder which is included for every block as defined in the AbstractBlock : https://github.com/magento/magento2/blob/f2d309a88298886460351c04973a4ff95c7a91c0/lib/internal/Magento/Framework/View/Element/AbstractBlock.php#L186

Thus you don't have to modify the constructor of your block and can simply add the following method:

public function getMediaUrl() {
    return $this->_urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]);
}

Then in your template you can call:

$block->getMediaUrl();

Answer 3

If you don't want to go to the trouble of extending \Magento\Framework\View\Element\Template, and you want your .phtml file to use the block \Magento\Framework\View\Element\Template, then you can use this shortcut:

$this->helper('Magento\Cms\Helper\Wysiwyg\Images')->getBaseUrl()

Answer 4

Edit: Please note that this was a valid and documented answer when first answered, but helpers have since now been deprecated, and so the use of the below is highly discouraged.

---

I'm going to use Raphael's answer and extend it - but instead of adding the method into the block class, why not create a helper and add it in there?

Start by creating a new module the usual way, and within the root, create a new folder called "Helper" and add the required code in there:

namespace YourSite\YourModule\Helper;
use Magento\Framework\UrlInterface;
class Url extends \Magento\Framework\App\Helper\AbstractHelper
{
    public function getMediaPath() {
        return $this->_urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]);
    }

}

Once activated and compiled, you will be able to use it within your template file using the following method:

<?php $url = $this->helper('\YourSite\YourModule\Helper\Url'); ?>
<img src="<?php echo $url->getMediaPath() ?>wysiwyg/image.jpg" />

I hope you (and potentially others) find this of great use!

Answer 5

At least in 2.2.6, you can use Magento\Framework\UrlInterface::getDirectUrl()

    protected function buildMediaUrl($path)
    {
        return $this->urlBuilder->getDirectUrl( $path, ['_type' => UrlInterface::URL_TYPE_MEDIA]);
    }

Answer 6

You Try this for product Image

$this->helper('Magento\Cms\Helper\Wysiwyg\Images')->getBaseUrl().'catalog/product'.$_product->getImage();

Answer 7

To get the media URL in a template file in Magento 2 without directly calling the Object Manager, you can follow these steps:

1. Inject the \Magento\Store\Model\StoreManagerInterface class into your block class constructor. Open the block class file (e.g., CustomBlock.php).

use Magento\Store\Model\StoreManagerInterface;

class CustomBlock extends \Magento\Framework\View\Element\Template
{
    protected $storeManager;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        StoreManagerInterface $storeManager,
        array $data = []
    ) {
        $this->storeManager = $storeManager;
        parent::__construct($context, $data);
    }

    // ...
}

2. Create a public function in the block class to retrieve the media URL. Add the following code to the CustomBlock.php file:

public function getMediaUrl($file)
{
    $mediaUrl = $this->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
    return $mediaUrl . $file;
}

3. In your template file (e.g., custom_template.phtml), you can now call the getMediaUrl function and pass the file path as a parameter to get the complete media URL.

<img src="<?php echo $block->getMediaUrl('catalog/product/image.jpg'); ?>" alt="Product Image">

By following these steps, you can retrieve the media URL in a template file without directly calling the Object Manager in Magento 2.