Comment spécifier le chemin de l'image de la peau dans le modèle HTML Knockout?

10

J'essaie d'ajouter une image d'icône dans le Magento_Paypal/web/template/payment/paypal-express.htmlmodèle. L'icône se trouve dans web/images. Je voudrais utiliser l'équivalent du code suivant, qui fonctionne dans les modèles HTML de courrier électronique, mais pas ce modèle particulier:

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

Étant donné que les variables d'accolade ne fonctionnent pas dans ce modèle HTML, comment référencer une image qui existe dans le web/imagesrépertoire du thème ?

thdoan
la source

Réponses:

23

Vous devez appeler l' functionen jsdans le modèle.

require.toUrl('images/icon-paypal.png');
Sunil Patel
la source
3
C'est exactement ce que je cherchais - accepté! Voici la balise image finale pour les personnes intéressées: <img data-bind="attr: { src: require.toUrl('')+'images/icon-paypal.png' }" alt="">.
thdoan
2
Cela ne serait-il pas mieux require.toUrl('images/icon-paypal.png');? Je ne l'ai pas essayé, je suppose simplement que cela fonctionne.
Ben Crook
1
@BenCrook Je peux confirmer que votre suggestion fonctionne.
Darren Felton
Merci @Meogi, si quelqu'un d'autre peut le confirmer, je mettrai à jour la réponse. Je suis trop occupé sur Magento 1 pour le vérifier.
Ben Crook
1
@BenCrook J'ai vérifié et je peux confirmer que votre solution fonctionne
Rafał Cz.
3

Si vous essayez d'ajouter simplement un chemin d'image dans un fichier phtml, vous devez suivre la procédure ci-dessous,

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

Pour ce faire avec Knockout:

Essayez d'ajouter une variable à la fenêtre à partir du fichier * .phtml:

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

et lire cette variable depuis la fenêtre:

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

Changez votre code d'image:

<img alt="" data-bind="attr: { src: someFunction() } "/>
Vishwas Soni
la source
mais ce chemin de fenêtre que vous devez appeler dans la partie tête, il vaut donc mieux utiliser ko.
Sunil Patel,
3

créer une variable js en phtml

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

Créez maintenant une nouvelle fonction js

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

dans votre fichier html

 <img alt="" data-bind="attr: { src: getImagepaypal() } "/>
Qaisar Satti
la source
Pouvez-vous s'il vous plaît me dire comment créer un fichier js et html complet en remplacement personnalisé et comment l'ajouter en xml?
Sarfaraj Sipai
vouliez-vous remplacer les js et html magnéto par défaut de votre module?
Qaisar Satti
oui je veux remplacer les fichiers "Magento_CheckoutAgreements" phtml, js et html.
Sarfaraj Sipai
@SarfarajSipai suivez ce magento.stackexchange.com/questions/170646/…
Qaisar Satti
Je sais comment créer / remplacer le module mais je ne sais pas comment remplacer "js" et "html" dans le remplacement de thème personnalisé, donc je veux le savoir.
Sarfaraj Sipai
0

Vous pouvez l'utiliser dans chaque fichier js Magento require sans aucune exigence - cela vient du fournisseur / magento / module-theme / view / frontend / templates / page / js / require_js.phtml

require.s.contexts ._. config.baseUrl
Alicja Fornalik
la source