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.