如何在 Magento 2 的 javascript 文件中获取静态图像文件的 url？

Question

我需要从 javascript 文件 (payment.js) 中为存储在我的主题 (app/design/frontend/MyVendor/MyTheme/web/images/image.png) 中的图像获取 URL。

在PHP我可以这样做：

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

如何在 JavaScript 中执行此操作？

Answer 1

我通过从 *.phtml 文件向 window 添加变量来做到这一点：

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

并从 *.js 中的 window 中读取该变量：

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

实际上，在 Magento 核心文件中我看到了这样的例子。

Answer 2

更好的方法是：

.phtml 文件

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

.js 文件

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

    return mageJsComponent;
});

Answer 3

在 JavaScript 中可用于 require.toUrl('images/image.png')。

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