Как указать путь к изображению скина в HTML-шаблоне Knockout?

10

Я пытаюсь добавить изображение значка в Magento_Paypal/web/template/payment/paypal-express.htmlшаблон. Значок находится в web/images. Я хотел бы использовать эквивалент следующего кода, который работает в шаблонах HTML электронной почты, но не в этом конкретном шаблоне:

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

Поскольку переменные в фигурных скобках не работают в этом HTML-шаблоне, как вы можете ссылаться на изображение, которое существует в web/imagesкаталоге темы ?

magento2 magento-2.1 knockoutjs thdoan
источник

Ответы:

24

Вам нужно позвонить functionв jsиз шаблона.

require.toUrl('images/icon-paypal.png');
Сунил Патель
источник
3
Это именно то, что я искал - принято! Вот конечный тег изображения для тех , кто заинтересован: <img data-bind="attr: { src: require.toUrl('')+'images/icon-paypal.png' }" alt="">.
thdoan
2
Разве это не было бы лучше, чем require.toUrl('images/icon-paypal.png');? Я не пробовал это, я просто предполагаю, что это работает.
Бен Крук
1
@BenCrook Я могу подтвердить, что ваше предложение работает.
Даррен Фелтон
Спасибо @Meogi, если кто-нибудь еще может подтвердить это, я обновлю ответ. Я слишком занят на Magento 1, чтобы проверить это.
Бен Крук
1
@BenCrook Я проверил и могу подтвердить, что ваше решение работает
Rafał Cz.
3

Если вы пытаетесь добавить только путь к изображению в файле phtml, следуйте нижеприведенному пути, 

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

Чтобы сделать это с помощью способа нокаута:

Попробуйте добавить переменную в окно из файла * .phtml:

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

и читая эту переменную из окна:

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

Измените свой код изображения: 

<img alt="" data-bind="attr: { src: someFunction() } "/>
Вишвас Сони
источник
но этот путь окна вы должны вызывать в головной части, так что лучше использовать ko.
Сунил Патель
3

создать переменную js в phtml

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

Теперь создайте новую функцию JS 

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

в вашем HTML-файле 

 <img alt="" data-bind="attr: { src: getImagepaypal() } "/>
Кайсар Сатти
источник
Подскажите, пожалуйста, как создать полный файл js и html в пользовательском переопределении и как добавить его в xml?
Сарфарадж Сипай
Вы хотите переопределить магнитный по умолчанию js и html в вашем модуле?
Кайсар Сатти
да, я хочу переопределить файлы "Magento_CheckoutAgreements" phtml, js и html.
Сарфарадж Сипай
@SarfarajSipai следовать этой magento.stackexchange.com/questions/170646/...
Кайсар Сатти
Я знаю, как создать / переопределить модуль, но я не знаю, как переопределить "js" и "html" в пользовательской переопределении темы, поэтому я хочу это знать.
Сарфарадж Сипай
0

Вы можете использовать это в каждом magento, требующем js-файлы без каких-либо требований - это исходит от vendor / magento / module-theme / view / frontend / templates / page / js / require_js.phtml 

require.s.contexts ._. config.baseUrl
Алисия Форналик
источник