Knockout HTMLテンプレートでスキン画像のパスを指定する方法は？

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

— トドアン
ソース

23

あなたは、呼び出す必要があります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あなたの提案が機能していることを確認できます。

— ダレンフェルトン2017年

@Meogiに感謝します。他の誰かが確認できる場合は、回答を更新します。Magento 1で忙しいのでatmを確認できません。

— Ben Crook 2017年

1

@BenCrook私がチェックし、あなたのソリューションが動作していることを確認することができます

— ラファウのCzを。

3

phtmlファイルに画像パスのみを追加する場合は、以下の方法に従う必要があります。

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

Knockoutの方法でこれを行うには：

* .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

phtmlにjs変数を作成する

<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に追加する方法を教えてください。

— Sarfaraj Sipai 2017

モジュールのマグネトのデフォルトjsとhtmlをオーバーライドしますか？

— Qaisar Satti 2017

はい、「Magento_CheckoutAgreements」ファイルのphtml、js、htmlをオーバーライドします。

— Sarfaraj Sipai 2017

@SarfarajSipaiは、このmagento.stackexchange.com/questions/170646/…をフォローします

— Qaisar Satti

モジュールの作成/オーバーライド方法は知っていますが、カスタムテーマのオーバーライドで「js」と「html」をオーバーライドする方法がわからないので、知りたいです。

— Sarfaraj Sipai 2017

0

これを各magento require jsファイルで要件なしに使用できます-ベンダー/magento/module-theme/view/frontend/templates/page/js/require_js.phtmlから取得

require.s.contexts ._。config.baseUrl

— アリチャ・フォルナリク
ソース