Bagaimana cara menentukan jalur gambar kulit dalam template HTML Knockout?


10

Saya mencoba menambahkan gambar ikon di Magento_Paypal/web/template/payment/paypal-express.htmltemplate. Ikon terletak di web/images. Saya ingin menggunakan kode yang setara dengan yang berikut, yang berfungsi dalam templat HTML email, tetapi tidak pada templat khusus ini:

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

Karena variabel kurung kurawal tidak berfungsi dalam template HTML ini, bagaimana Anda mereferensikan gambar yang ada di web/imagesdirektori tema ?

Jawaban:


23

Anda perlu memanggil ke functiondalam jsdari templat.

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

3
Inilah yang saya cari - diterima! Berikut tag gambar akhir bagi mereka yang tertarik: <img data-bind="attr: { src: require.toUrl('')+'images/icon-paypal.png' }" alt="">.
thdoan

2
Bukankah itu lebih baik require.toUrl('images/icon-paypal.png');? Saya belum mencobanya, saya hanya menganggap itu berhasil.
Ben Crook

1
@ BenCrook Saya dapat mengkonfirmasi bahwa saran Anda berfungsi.
Darren Felton

Terima kasih @Meogi, jika ada orang lain yang bisa mengkonfirmasinya saya akan memperbarui jawabannya. Saya terlalu sibuk di Magento 1 untuk memeriksa atm.
Ben Crook

1
@BenCrook Saya telah memeriksa dan dapat mengkonfirmasi bahwa solusi Anda berfungsi
Rafał Cz.

3

Jika Anda mencoba menambahkan hanya path gambar dalam file phtml, Anda harus mengikuti cara di bawah ini

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

Untuk melakukannya dengan cara Knockout:

Coba tambahkan variabel ke jendela dari file * .phtml:

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

dan membaca variabel itu dari jendela:

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

Ubah kode gambar Anda:

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

tetapi jalur jendela itu Anda harus memanggil bagian kepala, jadi lebih baik menggunakan ko.
Sunil Patel

3

buat variabel js dalam phtml

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

Sekarang buat fungsi js baru

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

di file html Anda

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

Bisakah Anda memberi tahu saya cara membuat file js dan html penuh di custom override dan cara menambahkannya di xml?
Sarfaraj Sipai

Anda ingin mengganti js dan html magneto default di modul Anda?
Qaisar Satti

ya saya ingin mengganti "Magento_CheckoutAgreements" file phtml, js dan html.
Sarfaraj Sipai


Saya tahu cara membuat / menimpa modul tetapi saya tidak tahu cara menimpa "js" dan "html" di tema kustom menimpa jadi saya ingin tahu itu.
Sarfaraj Sipai

0

Anda dapat menggunakan ini di setiap magento memerlukan file js tanpa persyaratan - itu berasal dari vendor / magento / module-theme / view / frontend / templates / halaman / js / require_js.phtml

memerlukan.s.konteks ._. config.baseUrl
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.