How to get url for static image file in Magento 2's javascript files?

Question

I need to get a URL for an image stored in my theme (app/design/frontend/MyVendor/MyTheme/web/images/image.png) from a javascript file (payment.js).

In PHP I can do it like this:

<?php echo $block->getViewFileUrl('images/image.png') ?>

How can I do this in JavaScript?

Formatting, removed irrelevant tags – AlBlue Apr 29 '16 at 15:02 — AlBlue, Apr 29 '16 at 15:02
genuine question, don't know why it is downvoted – Claudiu Creanga Jul 05 '16 at 20:56 — Claudiu Creanga, Jul 05 '16 at 20:56

score 15 · Answer 1 · answered Nov 10 '19 at 10:07

15

In JavaScript it's available with require.toUrl('images/image.png').

answered Nov 10 '19 at 10:07

Holly

7,462
23
86
140

score 3 · Accepted Answer · answered Apr 29 '16 at 07:56

I did it by adding variable to window from *.phtml file:

<script>
    window.imgpath = '<?php echo $block->getViewFileUrl('images/image.png') ?>';
</script>

and reading that variable from window in *.js:

function someFunction() {
    var imgPath = window.imgpath;
}

Actually, in Magento core files I saw examples of such things.

score 1 · Answer 3 · answered Jul 09 '16 at 18:53

A better way to do it is:

.phtml file

<script type="text/x-magento-init">
    {
        "*": {
            "Module/js/example":"<?php echo "test" ?>"
        }
    }        
</script>

.js file

define([], function () {
    var mageJsComponent = function(config)
    {
        console.log(config);
    };

    return mageJsComponent;
});

Doc: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

How to get url for static image file in Magento 2's javascript files?

3 Answers3