I'm using webicon script in my theme to use svg/png as icons. This is the code from my jQuery widget:

_create: function () {
        icons: {
            tile: 'http://magento2.dev:8888/project/pub/static/frontend/vendor/theme/en_US/images/tile.png',
            user: '../images/user.png'

If I hardcode the whole path the image displays correctly, second one doesn't display. I've tried other approaches that also wont display. Is there a way to do this directly in JS? I know I could load the path with data-mage-init in PHP and pass it in with config options, but I'd like to know if anyone found a way to do this directly in JS?

1 Answer 1


This is not a solution, but it is an explanation on why you SHOULD use the data-mage-init approach.
You kind of HAVE TO provide the calculated image paths via a template or something because of the theme fallback mechanism.
Also, if you provide the full path to something in the pub/static folder your widget will crash if the static resources are not deployed.
You need something that generates the image in pub/static before using it. passing it as a parameter from a template will ensure that.

  • Thanks Marius, it did do the trick, i passed the the url to static folder with: data-mage-init='{"stickyFooter": {"baseUrl": "<?php echo $block->getViewFileUrl('images'); ?>"}}' and prepended the url to '/user.png' in JS. Worked like a charm.
    – belfort1
    Commented Dec 5, 2016 at 14:23
  • you should use <?php echo $block->getViewFileUrl('images/user.png'); ?> directly instead of appending user.png at the end because of the same fallback mechanism. The way you built it, if you change the theme and you have an images folder in your theme but not a user.png file, magento will not find the image and it will not fall back to the default theme/module
    – Marius
    Commented Dec 5, 2016 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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