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

Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.