Add a static image on PHTML page and CMS Blocks : Magento2

Question

How I can Add a static image on PHTML page and CMS Blocks into Magento2? in Magento 1.x it was possible using $this->getSkinUrl('images/xyz.jpg')

I am trying following method into Magento2

In Phtml File:

<img src=”<?= $block->getViewFileUrl(‘images/footer-logo.png’); ?>” alt=”Demo” />

In CMS Blocks:

<img src=”{{view url=”images/slide-bg.jpg”}}” alt=”” />

but it's not working properly. Please suggest me my mistakes

Answer 1

image url Syntax is ok for both static block and phtml, But make sure that when you write this code in static block

<img src="{{view url='images/slide-bg.jpg'}}" alt="test" />

on front-end it looks like

http://localhost/magento2new/pub/static/frontend/Magento/luma/en_US/images/slide-bg.jpg

Where Magento/luma is package name and theme name, you can replace with your package and theme name

So you have to take care for slide-bg.jpg is exist in

pub/static/frontend/Magento/luma/en_US/images directory.

In your case,

<img src="<?php echo $this->getViewFileUrl('images/footer-logo.png'); ?>" alt="Demo">

Syntax seems ok, but in front-end It looks like

http://localhost/magento2new/pub/static/frontend/Magento/luma/en_US/images/footer-logo.png

So you have to make sure that footer-logo.png exist in

pub/static/frontend/Magento/luma/en_US/images directory.

And don't forgot about "[quotation marks]

Answer 2

For your custom module create a directory structure like

Company/Module/view/frontend/web/images/image-icon.png

and in phtml use following code

<img src='<?php echo $this->getViewFileUrl('Company_Module::images/image-icon.png'); ?>' alt="image-icon" width="30" height="25">

Answer 3

Easy solution:

1. Put your image on Your Magento 2 Path:

   /app/design/frontend/< Vendor >/< theme >/web/images
   

2. Use this code to call the image in phtml file:

   echo $block->getViewFileUrl('images/demo.jpg'); 
   

Answer 4

If you would also like to keep things a little more organised you can add images for your overridden core modules under your custom theme. For example, I need an image for the newsletter form. I added an image in

app/design/frontend/<Vendor>/<theme>/Magento_Newsletter/web/images/envelope.png

and in my app/design/frontend/<Vendor>/<theme>/Magento_Newsletter/templates/subscribe.phtml file I used it like below to get the image source

$this->getViewFileUrl('Magento_Newsletter::images/envelope.png');

I use Magento v2.2

Answer 5

Another way to do this is using an inline image:

<?php
// get contents of a file into a string
$filename = "path/to/image.jpg";
$handle = fopen($filename, "r");
$contents = fread($handle, filesize($filename));
$imagedata = base64_encode($content);
fclose($handle);
?>

<img src="data:image/jpeg;base64, <?= $imagedata; ?>" alt="alt text" />

Answer 6

$imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                        ->init($mainProduct, 'product_base_image')
                        ->constrainOnly(TRUE)
                        ->keepAspectRatio(TRUE)
                        ->keepTransparency(TRUE)
                        ->keepFrame(FALSE)
                        ->resize(281, 281)->getUrl();

Answer 7

Use Module image : $block->getViewFileUrl('Vendor_Module::images/test.jpg');

Use Theme image : $block->getViewFileUrl('images/test.jpg');