11

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?

4 Answers 4

30

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

require.toUrl('images/icon-paypal.png');
9
  • 4
    This is exactly what I was looking for -- accepted! Here's the final image tag for those interested: <img data-bind="attr: { src: require.toUrl('')+'images/icon-paypal.png' }" alt="">.
    – thdoan
    May 3, 2017 at 7:24
  • 2
    Wouldn't that be better as require.toUrl('images/icon-paypal.png');? I haven't tried it, I'm just presuming that works.
    – Ben Crook
    May 9, 2017 at 16:04
  • 1
    @BenCrook I can confirm that your suggestion works. Jun 26, 2017 at 15:46
  • 1
    @BenCrook I checked and can confirm that your solution works
    – Rafał Cz.
    Dec 1, 2017 at 13:37
  • 2
    For anyone wondering, this also works for module images just add it to the start of the image path - require.toUrl('Vendor_Module/images/icon-paypal.png');
    – Someone
    Aug 6, 2020 at 15:53
4

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() } "/>
1
  • but that window path you must need to call into head part, so better to do using ko. May 3, 2017 at 6:31
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() } "/>
7
  • Can you please tell me how to create full js and html file in custom override and how to add that in xml? Oct 10, 2017 at 5:48
  • did you want to override the magneto default js and html in your module? Oct 10, 2017 at 5:49
  • yes i want to override "Magento_CheckoutAgreements" files phtml, js and html. Oct 10, 2017 at 5:50
  • @SarfarajSipai follow this magento.stackexchange.com/questions/170646/… Oct 10, 2017 at 6:05
  • I know how to create/override module but i dont know how to override "js" and "html" in custom theme override so i want to know that. Oct 10, 2017 at 6:15
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.