magento 2: Je veux afficher une image dans le fichier phtml du modèle de module

21

Je souhaite afficher une image dans le fichier de modèle de module. Quand quelqu'un installe mon module, il peut voir cette image. Puis-je stocker mes images dans le répertoire de mon module ou non?

magento-2.0 phtml Ankush Chauhan
la source
Ohoo ankush bhai magento2
Amit Singh

Réponses:

33

Oui, vous pouvez stocker des images dans les répertoires Web de votre module en fonction de la zone de vos modèles. Le chemin est: Vendor / Module / view / {frontend | adminhtml} / web / images /

Ensuite, dans vos fichiers * .phtml, vous pouvez afficher l'image:

<img src="<?php echo $this->getViewFileUrl('Vendor_Module::images/image.png'); ?>" />
Miroslav Petroff
la source
Si je veux cette URL en aide, comment puis-je l'obtenir? ou dans le fichier js?
Nitesh
Dans helper, vous pouvez injecter la \Magento\Framework\View\Result\PageFactoryclasse dans votre constructeur as $pageFactorypuis appeler la $pageFactory->getViewFileUrl()méthode. Pour les fichiers js, je n'ai aucune idée de comment les obtenir.
Miroslav Petroff
1

J'aime coder en base 64 mes PNG et les aligner. J'utilise https://www.base64-image.de .

        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ....=">
ChristianTL
la source
0 
<script type="text/x-magento-init">
{
    <?php /* this defines the target of the widget */ ?>
    "#target_id": {
        <?php /* this defines the widget */ ?>
        "image.widget.name": {
            "imagename" : "<?php echo $this->getViewFileUrl('Vendor_Module::images/image.png'); ?>"
        }
    }
}

Vous utiliseriez le script d'initialisation du widget de magento pour démarrer votre javascript avec l'option "imagename" définie. Cette technique d'initialisation est généralement effectuée dans des fichiers phtml. Mon code suppose que votre image est dans Vendor / Module / view / {frontend | adminhtml} / web / images /

Pour plus d'informations, vous pouvez voir la documentation de magento 2. http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html

Amad
la source