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;;
 }
}

• Rakesh Jesadiya: try with $this->_storeManager->getStore()->getBaseUrl().'pub/static/frontend/Namespace/Modulename/en_US/images/demo.jpg'
• Prince Patel: This works only when image available in static folder also this is not right way to get url.
• Khoa Truong: Vendor_Module is your custom module name.
• Khoa Truong: Did you try only with echo $this->getViewFileUrl('Vendor_Module::images/demo.jpg');?
• Khoa Truong: See my updated answer. We can try with $this->getViewFileUrl('Vendor_Module::images/demo.jpg');

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");

• DevonDahon: It doesn't work on my side, when I inspect my image, I see this: <img src="mywebsite.com/pub/static/version1510235195/frontend/Myvendor/…" style="display: none !important;">

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

• Prince Patel: yes I have already image in adminhtml/web folder but it's seems like $this->getViewFileUrl() or $block->getViewFileUrl() not working
• Khoa Truong: I have tested. I'm pretty sure it will work, did you try to echo and run static content deploy content?
• Prince Patel: Check now I edited question with file where I try to get URL.

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" />