How to get url for static image file in Magento2 javascript files?

Question

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

Answer 1

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>

• Claudiu Creanga: thanks for the answer. I think I am doing something wrong with Jquery widgets, because strings work fine, but if I try to use return the info is not there. I updated my question.

Answer 2

The "Magento 2" way to do this would be

1. Initialize your script as a RequireJS module using the x-magento-init <script/> tag, using the * feature so its not bound to a DOM element as a Magento jQueryUI style widget

2. Use PHP to dynamically generate the JSON object you'll pass into your script