¿Cómo especificar la ruta de la imagen de máscara en la plantilla HTML de Knockout?

10

Estoy tratando de agregar una imagen de icono en la Magento_Paypal/web/template/payment/paypal-express.htmlplantilla. El ícono se encuentra en web/images. Me gustaría usar el equivalente del siguiente código, que funciona en plantillas HTML de correo electrónico, pero no esta plantilla en particular:

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

Dado que las variables de llaves no funcionan en esta plantilla HTML, ¿cómo hace referencia a una imagen que existe en el web/imagesdirectorio del tema ?

Thdoan
fuente

Respuestas:

23

Debe llamar functional jsdesde la plantilla.

require.toUrl('images/icon-paypal.png');
Sunil Patel
fuente
3
Esto es exactamente lo que estaba buscando, ¡aceptado! Aquí está la etiqueta de imagen final para los interesados: <img data-bind="attr: { src: require.toUrl('')+'images/icon-paypal.png' }" alt="">.
Thdoan
2
¿No sería eso mejor require.toUrl('images/icon-paypal.png');? No lo he intentado, solo supongo que funciona.
Ben Crook
1
@BenCrook Puedo confirmar que su sugerencia funciona.
Darren Felton
Gracias @Meogi, si alguien más puede confirmarlo, actualizaré la respuesta. Estoy demasiado ocupado en Magento 1 para verificarlo.
Ben Crook
1
@BenCrook Lo comprobé y puedo confirmar que su solución funciona
Rafał Cz.
3

Si está intentando agregar solo una ruta de imagen en el archivo phtml, debe seguir a continuación,

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

Para hacer esto con Knockout way:

Intente agregar una variable a la ventana desde el archivo * .phtml:

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

y leyendo esa variable desde la ventana:

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

Cambia tu código de imagen:

<img alt="" data-bind="attr: { src: someFunction() } "/>
Vishwas Soni
fuente
pero esa ruta de ventana debe necesitar llamar a la parte de la cabeza, así que es mejor hacerlo con ko.
Sunil Patel
3

crear variable js en phtml

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

Ahora crea una nueva función js

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

en tu archivo html

 <img alt="" data-bind="attr: { src: getImagepaypal() } "/>
Qaisar Satti
fuente
¿Puede decirme cómo crear un archivo js y html completo en una anulación personalizada y cómo agregarlo en xml?
Sarfaraj Sipai
¿desea anular el magneto default js y html en su módulo?
Qaisar Satti
sí, quiero anular los archivos "Magento_CheckoutAgreements" phtml, js y html.
Sarfaraj Sipai
@SarfarajSipai sigue este magento.stackexchange.com/questions/170646/…
Qaisar Satti
Sé cómo crear / anular el módulo, pero no sé cómo anular "js" y "html" en la anulación de tema personalizado, así que quiero saber eso.
Sarfaraj Sipai
0

Puede usar esto en cada archivo magento require js sin ningún requisito: proviene de vendor / magento / module-theme / view / frontend / templates / page / js / require_js.phtml

require.s.contexts ._. config.baseUrl
Alicja Fornalik
fuente