How to specify skin image path in Knockout HTML template?

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?

asked May 3 '17 at 6:02

thdoan

408517

add a comment |

<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?

asked May 3 '17 at 6:02

thdoan

408517

add a comment |

<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?

asked May 3 '17 at 6:02

thdoan

408517

<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?

magento2 magento-2.1 knockoutjs

asked May 3 '17 at 6:02

thdoan

408517

asked May 3 '17 at 6:02

thdoan

408517

asked May 3 '17 at 6:02

thdoan

408517

asked May 3 '17 at 6:02

thdoan

408517

asked May 3 '17 at 6:02

thdoan

408517

add a comment |

3 Answers
3

active

oldest

votes

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

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

edited yesterday

Daniel Glynn Goodwin

187

answered May 3 '17 at 6:23

Sunil Patel

1,2881612

1

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

|
show 2 more comments

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() } "/>

edited May 3 '17 at 6:42

answered May 3 '17 at 6:26

Vishwas Soni

1,326729

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

add a comment |

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() } "/>

edited May 3 '17 at 6:47

answered May 3 '17 at 6:39

Qaisar Satti

26.3k1255106

Can you please tell me how to create full js and html file in custom override and how to add that in xml?
– Sarfaraj
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
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
Oct 10 '17 at 6:15

|
show 2 more comments

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f172722%2fhow-to-specify-skin-image-path-in-knockout-html-template%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

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

edited yesterday

Daniel Glynn Goodwin

187

answered May 3 '17 at 6:23

Sunil Patel

1,2881612

1

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

|
show 2 more comments

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

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

edited yesterday

Daniel Glynn Goodwin

187

answered May 3 '17 at 6:23

Sunil Patel

1,2881612

1

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

|
show 2 more comments

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

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

edited yesterday

Daniel Glynn Goodwin

187

answered May 3 '17 at 6:23

Sunil Patel

1,2881612

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

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

edited yesterday

Daniel Glynn Goodwin

187

answered May 3 '17 at 6:23

Sunil Patel

1,2881612

edited yesterday

Daniel Glynn Goodwin

187

edited yesterday

Daniel Glynn Goodwin

187

edited yesterday

Daniel Glynn Goodwin

187

answered May 3 '17 at 6:23

Sunil Patel

1,2881612

answered May 3 '17 at 6:23

Sunil Patel

1,2881612

answered May 3 '17 at 6:23

Sunil Patel

1,2881612

1

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

|
show 2 more comments

1

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

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

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

@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

@BenCrook I checked and can confirm that your solution works
– Rafał Cz.
Dec 1 '17 at 13:37

|
show 2 more comments

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() } "/>

edited May 3 '17 at 6:42

answered May 3 '17 at 6:26

Vishwas Soni

1,326729

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

add a comment |

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() } "/>

edited May 3 '17 at 6:42

answered May 3 '17 at 6:26

Vishwas Soni

1,326729

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

add a comment |

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() } "/>

edited May 3 '17 at 6:42

answered May 3 '17 at 6:26

Vishwas Soni

1,326729

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() } "/>

edited May 3 '17 at 6:42

answered May 3 '17 at 6:26

Vishwas Soni

1,326729

edited May 3 '17 at 6:42

answered May 3 '17 at 6:26

Vishwas Soni

1,326729

answered May 3 '17 at 6:26

Vishwas Soni

1,326729

answered May 3 '17 at 6:26

Vishwas Soni

1,326729

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

add a comment |

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

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

add a comment |

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() } "/>

edited May 3 '17 at 6:47

answered May 3 '17 at 6:39

Qaisar Satti

26.3k1255106

Can you please tell me how to create full js and html file in custom override and how to add that in xml?
– Sarfaraj
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
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
Oct 10 '17 at 6:15

|
show 2 more comments

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() } "/>

edited May 3 '17 at 6:47

answered May 3 '17 at 6:39

Qaisar Satti

26.3k1255106

Can you please tell me how to create full js and html file in custom override and how to add that in xml?
– Sarfaraj
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
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
Oct 10 '17 at 6:15

|
show 2 more comments

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() } "/>

edited May 3 '17 at 6:47

answered May 3 '17 at 6:39

Qaisar Satti

26.3k1255106

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() } "/>

edited May 3 '17 at 6:47

answered May 3 '17 at 6:39

Qaisar Satti

26.3k1255106

edited May 3 '17 at 6:47

answered May 3 '17 at 6:39

Qaisar Satti

26.3k1255106

answered May 3 '17 at 6:39

Qaisar Satti

26.3k1255106

answered May 3 '17 at 6:39

Qaisar Satti

26.3k1255106

Can you please tell me how to create full js and html file in custom override and how to add that in xml?
– Sarfaraj
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
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
Oct 10 '17 at 6:15

|
show 2 more comments

Can you please tell me how to create full js and html file in custom override and how to add that in xml?
– Sarfaraj
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
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
Oct 10 '17 at 6:15

Can you please tell me how to create full js and html file in custom override and how to add that in xml?
– Sarfaraj
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
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
Oct 10 '17 at 6:15

|
show 2 more comments

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Mfrhtyj