Trying to call image in backend adminhtml less file

Question

I am using below css property inside a less file

background: url('../images/button-read-more.png') no-repeat left top;

this is addded in custom module app/code/Vendor/ModuleName/view/adminhtml/web/css/source/content-type/quote-item/_import.less

so wen image is being called it check at Magento/base module instead of Magento/backend

pub/static/version1591023269/adminhtml/Magento/base/default/vendor_modulename/images/button-read-more.png

I am unable to find a solution .

Answer 1

In your .less file, you'd reference a shared variable @baseDir that will refer you to the root of all the deployed pub/static

(Note, I emphaised deployed - if the asset isn't there, re-run: php bin/magento setup:static-content:deploy -f)

Check to ensure your images in the Vendor_Module/view/adminhtml/web/images/* folder.

Then reference the module & image within your .less file:

background-image: url('@{baseDir}Vendor_Module/images/example.png');