How to specify skin image path in Knockout HTML template?

Question

I'm trying to add an icon image in the Magento_Paypal/web/template/payment/paypal-express.html template. The icon is located in web/images. I would like to use the equivalent of the following code, which works in email HTML templates, but not this particular template:

<img src="{{view url='images/icon-paypal.png'}}">

Since curly brace variables do not work in this HTML template, how do you reference an image that exists in the theme's web/images directory?

Answer 1

You need to call the function into js from the template.

require.toUrl('images/icon-paypal.png');

Answer 2

If you are trying to add just an image path in phtml file, you should follow below way,

<img src="<?php echo $block->getViewFileUrl('images/image.png') ?>">\

To do this with Knockout way:

Try adding a variable to window from *.phtml file:

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

and reading that variable from window:

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

Change your image code :

<img alt="" data-bind="attr: { src: someFunction() } "/>

Answer 3

create js variable in phtml

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

Now create new js function

getImagepaypal: function() {
                return window.imgpath;
            }

in you html file

 <img alt="" data-bind="attr: { src: getImagepaypal() } "/>

Answer 4

You can use this in each magento require js files without any requirements - its coming from vendor/magento/module-theme/view/frontend/templates/page/js/require_js.phtml

require.s.contexts._.config.baseUrl