Wie wird der Skin-Bildpfad in der Knockout-HTML-Vorlage angegeben?

10

Ich versuche, der Magento_Paypal/web/template/payment/paypal-express.htmlVorlage ein Symbolbild hinzuzufügen . Das Symbol befindet sich in web/images. Ich möchte das Äquivalent des folgenden Codes verwenden, der in E-Mail-HTML-Vorlagen funktioniert, jedoch nicht in dieser speziellen Vorlage:

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

Wie verweisen Sie auf ein Bild, das im web/imagesVerzeichnis des Themas vorhanden ist, da Variablen in geschweiften Klammern in dieser HTML-Vorlage nicht funktionieren ?

magento2 magento-2.1 knockoutjs thdoan
quelle

Antworten:

23

Sie müssen das functionin jsaus der Vorlage aufrufen .

require.toUrl('images/icon-paypal.png');
Sunil Patel
quelle
3
Genau das habe ich gesucht - akzeptiert! Hier ist das endgültige Bild-Tag für Interessierte : <img data-bind="attr: { src: require.toUrl('')+'images/icon-paypal.png' }" alt="">.
Dooan
2
Wäre das nicht besser als require.toUrl('images/icon-paypal.png');? Ich habe es nicht ausprobiert, ich gehe nur davon aus, dass das funktioniert.
Ben Crook
1
@ BenCrook Ich kann bestätigen, dass Ihr Vorschlag funktioniert.
Darren Felton
Danke @Meogi, wenn jemand anderes es bestätigen kann, werde ich die Antwort aktualisieren. Ich bin zu beschäftigt mit Magento 1, um es zu überprüfen.
Ben Crook
1
@ BenCrook Ich habe überprüft und kann bestätigen, dass Ihre Lösung funktioniert
Rafał Cz.
3

Wenn Sie versuchen, nur einen Bildpfad in die HTML-Datei einzufügen, sollten Sie wie folgt vorgehen: 

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

So machen Sie das mit Knockout:

Versuchen Sie, dem Fenster eine Variable aus der * .phtml-Datei hinzuzufügen:

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

und Lesen dieser Variablen aus dem Fenster:

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

Ändern Sie Ihren Bildcode: 

<img alt="" data-bind="attr: { src: someFunction() } "/>
Vishwas Soni
quelle
Aber diesen Fensterpfad müssen Sie in den Kopfteil aufrufen, also besser mit ko.
Sunil Patel
3

Erstellen Sie eine js-Variable in phtml

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

Erstellen Sie nun eine neue js-Funktion 

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

in Ihrer HTML-Datei 

 <img alt="" data-bind="attr: { src: getImagepaypal() } "/>
Qaisar Satti
quelle
Können Sie mir bitte sagen, wie man eine vollständige JS- und HTML-Datei in einer benutzerdefinierten Überschreibung erstellt und wie man diese in XML hinzufügt?
Sarfaraj Sipai
Wollten Sie die Magneto-Standardeinstellungen js und html in Ihrem Modul überschreiben?
Qaisar Satti
Ja, ich möchte die "Magento_CheckoutAgreements" -Dateien phtml, js und html überschreiben.
Sarfaraj Sipai
@SarfarajSipai folgen Sie diesem magento.stackexchange.com/questions/170646/…
Qaisar Satti
Ich weiß, wie man ein Modul erstellt / überschreibt, aber ich weiß nicht, wie man "js" und "html" in der benutzerdefinierten Themenüberschreibung überschreibt, also möchte ich das wissen.
Sarfaraj Sipai
0

Sie können dies in jedem Magento verwenden, für das js-Dateien erforderlich sind, ohne dass dies erforderlich ist - es stammt vom Hersteller / magento / module-theme / view / frontend / templates / page / js / require_js.phtml 

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