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

Question

我需要从javascript文件（app/design/frontend/MyVendor/MyTheme/web/images/image.png）获取存储在我主题（payment.js）中的图片的网址。

在PHP中，我可以这样做：

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

我如何在JavaScript中执行此操作？

Answer 1

我是通过从* .phtml文件中添加变量来实现的：

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

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

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;
});

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

Answer 3

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