Magento2 JavaScript – How to Get URL for Static Image File

javascriptmagento2static-content

Say you have a js file in your module: MyModule/view/frontend/web/js/. How would you reference the image found in MyModule/view/frontend/web/images/?

A solution would be this one, but looks wrong and inserts global variables:

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

Update, using with widgets:

#template.phtml:
<script type="text/x-magento-init">
    {
        "*": {
            "mywidget": { 

                "marker_image": " <?php echo $block->getViewFileUrl('images/map_pin.png'); ?> "

            }
        }
    }
</script>

in my mywidget.js:

define([
    'jquery',
    'jquery/ui'
], function ($) {
    'use strict';
    $.widget('company.mywidget', {

    _create: function(){
        console.log(this.options.marker_image); //OUTPUTS THE RIGHT VALUE IN THE CONSOLE
        return this.options.marker_image; //THIS IS THE BIT THAT DOESN'T WORK
    },
   test_string: "this appears fine" //IF IT IS A STRING THEN IT IS FINE


});

return $.company.mywidget;

});

in my main js file where all comes together:

require([
        'jquery',
        'mywidget'
    ],
    function($,mywidget){  



    $(document).ready(function(){

        data = new mywidget();

        console.log(data) // returns an object where I cannot find my paramater, but test_string is there.

enter image description here

Best Answer

you can make your function as a jQuery UI widget and then call it from the template and sending the image url as a parameter.
For an idea on how to create a UI widget you can check how the configurable products widget is built and how it is called in the frontend with parameters
I know there are better examples but this is the first one I found that has parameters set on a template.
See my comments in the code to what means what. 

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": { //element to map the ui widget on, you can use 'body' if it's not element specific
            "configurable": { //widget name to initialize
                "spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>, //parameter
                "onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image', 'Magento_ConfigurableProduct') ?: 'false'; ?> //parameter
            }
        }
    }
</script>
Related Topic