Magento 2 get custom module image url from backend

Question

I used

<?php echo $this->getViewFileUrl('Vendor_Module::images/demo.jpg'); ?>
<?php echo $block->getViewFileUrl('Vendor_Module::images/demo.jpg'); ?>

But it's working only frontend, I want it in adminhtml block file.

I used this in renderer column of grid File:

namespace Vendor\Module\Block\Adminhtml\Product\Renderer;

use Magento\Framework\DataObject;

class FileIcon extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
{

    public function render(DataObject $row)
    {

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

        exit;
        //return $file;;

    }
}

Answer 1

Use \Magento\Framework\View\Asset\Repository class

protected $_assetRepo;

public function __construct(
    ...
    \Magento\Framework\View\Asset\Repository $assetRepo,
    ...
) {
    ...
    $this->_assetRepo = $assetRepo;
    ...
}

Now, you can get image URL by

echo $this->_assetRepo->getUrl("Vendor_Module::images/demo.jpg");

Answer 2

Take a look at the Magento Marketplace module:

vendor/magento/module-marketplace/view/adminhtml/templates/index.phtml

$block->getViewFileUrl('Magento_Marketplace::partners/images/magento-connect.png');

The image is vendor/magento/module-marketplace/view/adminhtml/web/partners/images/magento-connect.png

Our image should be under web:

view/adminhtml/web/images/demo.jpg

Try to get with the module prefix in your template:

<?php echo $block->getViewFileUrl('Your_Module::images/demo.jpg'); ?>

Remember to clear Magento Cache and may need to delete view_preprocessed folder.

[EDIT]

In your case, you can try with

$this->getViewFileUrl('Vendor_Module::images/image-demo.jpg');

Answer 3

Most of the answers to this question are correct, but may partially not correct or incomplete if still you can not get the image to show on the Backend.

If you have tried any of these solutions and is not working try this:

1) Make sure you have got the files you want to load in your custom Module directory like this: Vendor/Module/view/adminhtml/web/images/mage.jpg or and Vendor/Module/view/adminhtml/web/js/mage.js

2) Then in your block

public function __construct(        
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\View\Asset\Repository $moduleAssetDir,        
        array $data = []
    ) {

        $this->moduleAssetDir = $moduleAssetDir;
        parent::__construct($context, $data);
    }

You can then call the files like shown below:

$MageImage = $this->moduleAssetDir->getUrl("Vendor_Module::images/mage.jpg");
     $JsMage = $this->moduleAssetDir->getUrl("Vendor_Module::js/mage.js");

3) Then run this commandline

php bin/magento setup:upgrade

It will cause no harm if you choose to run this long line instead

php bin/magento setup:upgrade && php bin/magento indexer:reindex && php bin/magento cache:flush && php bin/magento cache:clean

Out of curiosity:

After upgrade check your pub directory assuming one of the locale is en_GB you should have something like this:

/pub/static/adminhtml/Magento/backend/en_GB/Vendor_Module/images/mage.jpg       

/pub/static/adminhtml/Magento/backend/en_GB/Vendor_Module/js/mage.js 

And rendered some like below:

<script type="text/javascript" src="siteUrl/static/version1234567890/adminhtml/Magento/backend/en_GB/Vendor_Module/js/mage.js"></script>

    <img src="siteUrl/static/version1234567890/adminhtml/Magento/backend/en_GB/Vendor_Module/images/mage.jpg" />