33

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=”<?php echo $this->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

  • Your try seems good. You need to flush your cache from backend as well as remove the cache file manually from /var/cache – Praful Rajput Dec 14 '15 at 10:12
53

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 frontend 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]

  • view for pub/static/frontend/Namespace/theme/locale store for site url – Praful Rajput Nov 22 '16 at 10:35
15

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">
  • thx, saved me a lot of time for searching :D – ZFNerd Jun 5 '18 at 10:54
  • @ZFNerd Most Welcome – Manish Jul 31 '18 at 6:20
8

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'); 
    
1

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

0

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" />
0
$imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                        ->init($mainProduct, 'product_base_image')
                        ->constrainOnly(TRUE)
                        ->keepAspectRatio(TRUE)
                        ->keepTransparency(TRUE)
                        ->keepFrame(FALSE)
                        ->resize(281, 281)->getUrl();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.