10

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?

23

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

require.toUrl('images/icon-paypal.png');
  • 3
    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 '17 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 '17 at 16:04
  • 1
    @BenCrook I can confirm that your suggestion works. – Darren Felton Jun 26 '17 at 15:46
  • Thanks @Meogi, if anyone else can confirm it I'll update the answer. I'm too busy on Magento 1 to check it atm. – Ben Crook Jun 26 '17 at 15:49
  • 1
    @BenCrook I checked and can confirm that your solution works – Rafał Cz. Dec 1 '17 at 13:37
3

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() } "/>
  • but that window path you must need to call into head part, so better to do using ko. – Sunil Patel May 3 '17 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() } "/>
  • Can you please tell me how to create full js and html file in custom override and how to add that in xml? – Sarfaraj Sipai Oct 10 '17 at 5:48
  • did you want to override the magneto default js and html in your module? – Qaisar Satti Oct 10 '17 at 5:49
  • yes i want to override "Magento_CheckoutAgreements" files phtml, js and html. – Sarfaraj Sipai Oct 10 '17 at 5:50
  • @SarfarajSipai follow this magento.stackexchange.com/questions/170646/… – Qaisar Satti Oct 10 '17 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. – Sarfaraj Sipai Oct 10 '17 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, privacy policy and cookie policy

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