I have the code below in MyVendor/MyTheme/Magento_Theme/templates/advertisement.phtml:

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

The first line displays the url of the image properly, I can see the image when I open the url in another tab of my browser. However, the second line with <img> tag doesn't display the image (which is in MyVendor/MyTheme/web/images/).

I tried removing the cache files and deploy static content:

cd /var/www/html/MAGENTO_FOLDER
rm -rf var/cache/* var/di/* var/generation/* var/page_cache/* var/view_preprocessed/* pub/static/frontend/*
php bin/magento cache:clean
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f -j 1 zh_Hans_CN en_US

Also, I noticed in Chrome Developer Tools that this attribute was added to the <img> tag: style="display: none !important;", and I can't remove it in the developer tool.

How can I fix it ?


My template is set in the following layout:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container">
            <block class="Magento\Framework\View\Element\Template" name="advertisement" template="Magento_Theme::advertisement.phtml" after="-" />
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />

Here is the tree structure of my custom module:

├── Magento_Theme
│   ├── layout
│   │   └── default.xml
│   ├── layouts.xml
│   ├── page_layout
│   │   └── home_custom.xml
│   ├── templates
│   │   └── advertisement.phtml
│   └── web
│       └── css
│           └── source
│               └── _extend.less
├── media
│   └── preview.png
├── registration.php
├── theme.xml
└── web
    └── images
        ├── ad2.jpg
        ├── advertisement.png
        └── logo.svg

After digging, I tried with other pictures, also randomly taken from the Net and it worked, below is the list of pictures tried and their details:

web/images/ad2.jpg:           JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 100x110, frames 3
web/images/advertisement.png: PNG image data, 921 x 381, 8-bit/color RGBA, non-interlaced

This image is another example of image that can't be displayed from phtml: http://www.webdo.tn/wp-content/uploads/2015/09/publicite1.jpg

web/images/logo.svg:          SVG Scalable Vector Graphics image
web/images/pulpitrock.jpg:    JPEG image data, JFIF standard 1.02, aspect ratio, density 100x100, segment length 16, baseline, precision 8, 500x377, frames 3

Why does it work with some images and not with others ?

  • according to me image code is fine may be any jquery or javascript file add inline style – Sourav Nov 10 '17 at 3:48
  • Send me link of project. – Sourav Nov 10 '17 at 3:48
  • i think you only display advertisement banner after menu. Another way you can use show Static Block in your layout. Your image problem will be solve – Sourav Nov 10 '17 at 3:55

Instead of using $this, try using $block.

So it would be like <img src="<?php echo $block->getViewFileUrl('images/ad2.jpg'); ?>" />

Clear the cache again.

If this doesn't work, you should check the css of your container which is holding your img element.

  • Thanks for your reply. It still doesn't work using $block instead of $this. I updated my question to show the container I'm using. – DevonDahon Nov 9 '17 at 9:47
  • try this, <img src="<?php echo $block->getViewFileUrl('Magento_Theme::images/ad2.jpg'); ?>" /> – MGento Nov 9 '17 at 10:17
  • I get the same result, still with style="display: none !important;" in the img tag. Any other idea ? – DevonDahon Nov 9 '17 at 11:39
  • Then I think, some css might be changing the display property of this particular img element. Check the "Inspect element" option in your browser and see what's the class of the container which is holding the img element. Check the css class definition and see if there is any rule written to make the style to display:none. – MGento Nov 9 '17 at 11:51
  • I couldn't see anything wrong in the CSS, I unchecked all the CSS I could at checking the element, but I still get the same result. I added the tree structure of my custom module, is the picture in the good folder ? – DevonDahon Nov 9 '17 at 13:17

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