5

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

_create: function () {
    $(document).webicons({
        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?

Improve this question

1 Answer 1

Reset to default
6

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.

Improve this answer
2
  • 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
    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 ♦
    Dec 5, 2016 at 14:25

Your Answer

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

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