Magento2 : How to get base require js baseUrl to get static files?

Question

I am creating a custom module which retrieves the image from Package_Module/images/image.jpg in my javascript code. How to get the require js base URL or Static URL? or do you have any suggestions on what is the best to get the link of an image asset from javascript level?

Possible duplicate of How to get site url inside javascript file? — Ben Crook, Aug 01 '18 at 08:19
@BenCrook base URL and require js base URL might not be the same. :) — Ner, Aug 01 '18 at 08:23
If the base URL differs between files that is a problem IMO, the base URL should always be the base URL. — Ben Crook, Aug 01 '18 at 10:05
I've added a method to get the pub/static URL including your vendor, theme and locale. It sounds like that may be what you're after when you say the require JS base URL isn't the same? — Ben Crook, Aug 01 '18 at 10:11
Hi @BenCrook, yes, that was I was after. Should I adjust the description of this question? — Ner, Aug 02 '18 at 02:09
I think wording it as the theme static file URL may make more sense, I understand base URL to be the domain only such as https://example.com. — Ben Crook, Aug 02 '18 at 10:14

score 6 · Accepted Answer · answered Aug 01 '18 at 10:10

6

You can pass it through using x-magento-init as Khoa mentioned, or you can use this:

require.toUrl('test');

Which will output:

//localhost:3000/static/frontend/Vendor/theme/en_GB/test

Where localhost:3000 is your base URL.

answered Aug 01 '18 at 10:10

Ben Crook

15,685
3
52
104

1

Perfectly, I didn't know about it +1. – Khoa TruongDinh Aug 02 '18 at 03:50
Yes. This is exactly what I need. I just know. :) Thanks! – Ner Aug 03 '18 at 00:43

Khoa TruongDinh · Answer 2 · 2018-08-02T03:54:24.737

1) Using the Js global variable. For example, on the checkout page, we can check:

window.checkoutConfig.imageData

See more here: https://magento.stackexchange.com/a/133732/33057

2) Passing the image to Js variable in your phtml:

<script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
        }
    }
</script>

Magento2 : How to get base require js baseUrl to get static files?

2 Answers2