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

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