Come specificare il percorso dell'immagine della skin nel modello HTML Knockout?


10

Sto cercando di aggiungere un'immagine icona nel Magento_Paypal/web/template/payment/paypal-express.htmlmodello. L'icona si trova in web/images. Vorrei utilizzare l'equivalente del seguente codice, che funziona nei modelli HTML e-mail, ma non in questo modello particolare:

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

Poiché le variabili di parentesi graffe non funzionano in questo modello HTML, come si fa a fare riferimento a un'immagine esistente nella web/imagesdirectory del tema ?

Risposte:


23

Devi chiamare functionin jsdal modello.

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

3
Questo è esattamente quello che stavo cercando - accettato! Ecco il tag di immagine finale per chi fosse interessato: <img data-bind="attr: { src: require.toUrl('')+'images/icon-paypal.png' }" alt="">.
thdoan

2
Non sarebbe meglio come require.toUrl('images/icon-paypal.png');? Non l'ho provato, presumo solo che funzioni.
Ben Crook,

1
@BenCrook Posso confermare che il tuo suggerimento funziona.
Darren Felton,

Grazie @Meogi, se qualcun altro può confermarlo aggiornerò la risposta. Sono troppo occupato su Magento 1 per verificarlo.
Ben Crook,

1
@BenCrook Ho verificato e posso confermare che la tua soluzione funziona
Rafał Cz.

3

Se stai provando ad aggiungere solo un percorso immagine nel file phtml, dovresti seguire la seguente procedura,

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

Per fare questo con il modo Knockout:

Prova ad aggiungere una variabile alla finestra dal file * .phtml:

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

e leggendo quella variabile dalla finestra:

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

Cambia il tuo codice immagine:

<img alt="" data-bind="attr: { src: someFunction() } "/>

ma quel percorso della finestra è necessario chiamare nella parte principale, quindi è meglio farlo usando ko.
Sunil Patel,

3

crea la variabile js in phtml

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

Ora crea una nuova funzione js

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

nel tuo file html

 <img alt="" data-bind="attr: { src: getImagepaypal() } "/>

Potete per favore dirmi come creare il file js e html completo in override personalizzato e come aggiungerlo in XML?
Sarfaraj Sipai,

volevi sovrascrivere il magneto js predefinito e html nel tuo modulo?
Qaisar Satti,

sì, voglio sovrascrivere i file "Magento_CheckoutAgreements" phtml, js e html.
Sarfaraj Sipai,


So come creare / sostituire il modulo ma non so come sostituire "js" e "html" con l'override del tema personalizzato, quindi voglio saperlo.
Sarfaraj Sipai,

0

Puoi usarlo in ogni magento richiede i file js senza alcun requisito - proviene dal fornitore / magento / modulo-tema / vista / frontend / modelli / pagina / js / require_js.phtml

require.s.contexts ._. config.baseUrl
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.