Jak określić ścieżkę obrazu skóry w szablonie Knockout HTML?

10

Próbuję dodać obraz ikony do Magento_Paypal/web/template/payment/paypal-express.htmlszablonu. Ikona znajduje się w web/images. Chciałbym użyć odpowiednika następującego kodu, który działa w szablonach HTML e-mail, ale nie tego konkretnego szablonu:

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

Ponieważ zmienne nawiasów klamrowych nie działają w tym szablonie HTML, w jaki sposób odwołujesz się do obrazu, który istnieje w katalogu motywu web/images?

magento2 magento-2.1 knockoutjs thdoan
źródło

Odpowiedzi:

25

Musisz zadzwonić functiondo jsz szablonu.

require.toUrl('images/icon-paypal.png');
Sunil Patel
źródło
3
Właśnie tego szukałem - zaakceptowałem! Oto ostateczny obraz tag dla zainteresowanych: <img data-bind="attr: { src: require.toUrl('')+'images/icon-paypal.png' }" alt="">.
thdoan
2
Czy nie byłoby tak lepiej require.toUrl('images/icon-paypal.png');? Nie próbowałem tego, po prostu zakładam, że to działa.
Ben Crook,
1
@BenCrook Mogę potwierdzić, że twoja sugestia działa.
Darren Felton
Dzięki @Meogi, jeśli ktokolwiek może to potwierdzić, zaktualizuję odpowiedź. Jestem zbyt zajęty Magento 1, żeby sprawdzić bankomat.
Ben Crook
1
@BenCrook Sprawdziłem i mogę potwierdzić, że Twoje rozwiązanie działa
Rafał Cz.
3

Jeśli próbujesz dodać tylko ścieżkę obrazu do pliku phtml, wykonaj następujące czynności, 

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

Aby to zrobić w trybie Knockout:

Spróbuj dodać zmienną do okna z pliku * .phtml:

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

i czytanie tej zmiennej z okna:

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

Zmień kod obrazu: 

<img alt="" data-bind="attr: { src: someFunction() } "/>
Vishwas Soni
źródło
ale ta ścieżka okna musi być wywołana do części głowy, więc lepiej zrobić to za pomocą ko.
Sunil Patel
3

utwórz zmienną js w phtml

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

Teraz utwórz nową funkcję js 

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

w tobie plik HTML 

 <img alt="" data-bind="attr: { src: getImagepaypal() } "/>
Qaisar Satti
źródło
Czy możesz mi powiedzieć, jak utworzyć pełny plik js i html w niestandardowym zastąpieniu i jak dodać go w xml?
Sarfaraj Sipai
czy chciałeś zastąpić domyślne magneto js i html w swoim module?
Qaisar Satti,
tak, chcę przesłonić pliki „Magento_CheckoutAgreements” phtml, js i html.
Sarfaraj Sipai
@SarfarajSipai śledź ten magento.stackexchange.com/questions/170646/…
Satti
Wiem, jak utworzyć / przesłonić moduł, ale nie wiem, jak przesłonić „js” i „html” w niestandardowym przesłonięciu motywu, więc chcę to wiedzieć.
Sarfaraj Sipai
0

Możesz użyć tego w każdym magento wymagającym plików js bez żadnych wymagań - pochodzi od dostawcy / magento / module-theme / view / frontend / templates / page / js / requ_js.phtml 

Requires.s.contexts ._. config.baseUrl
Alicja Fornalik
źródło