Search A2Z 24

How to add a module or theme level static images on PHTML page and CMS Blocks in Magento2


In Magento 1 we used the {{media url="..."}} to display the image in frontend. But now how to display in Magento 2.

In if need to pull a image from a theme in magento 2. .../app/design/frontend/< Namespace >/< theme >/web/images
Use below methods to get image in CMS and in phtml file.

In CMS Block, get image from theme folder:

<img src="{{view url="images/static-image.jpg"}}" alt="static-image" />

on front end it looks like for en_US(locale) : .../pub/static/frontend/< Namespace >/< theme >/en_US/images/static-image.jpg Where "< Namespace >" is package name and "< theme >" is theme name, you can replace with your package and theme name

In phtml,get image from theme folder:

<img src='<?php echo $this->getViewFileUrl('images/static-image.jpg'); ?>' alt="static-image">

Note : don't forgot about "[quotation marks]

In phtml,get Custom module web image:

For your custom module create a directory structure like .../Company/Module/view/frontend/web/images/custom-image.jpg
use following code to get image from custom module:

<img src='<?php echo $this->getViewFileUrl('Company_Module::images/custom-image.jpg'); ?>' alt="custom-image">

About Author

by Admin

Share your thoughts!

Login as a member to access comment posting block !! click-here

Thoughts From Other Users (0)

No Comments