Fügen Sie ein statisches Bild auf der PHTML-Seite und den CMS-Blöcken hinzu: Magento2

33

Wie kann ich Magento2 ein statisches Bild auf einer PHTML-Seite und CMS-Blöcken hinzufügen? in Magento 1.x war es möglich mit$this->getSkinUrl('images/xyz.jpg')

Ich versuche folgende Methode in Magento2

In der Phtml-Datei:

<img src=”<?php echo $this->getViewFileUrl(‘images/footer-logo.png’); ?>” alt=”Demo”>

In CMS-Blöcken:

<img src=”{{view url=”images/slide-bg.jpg”}}” alt=”” />

aber es funktioniert nicht richtig. Bitte schlagen Sie mir meine Fehler vor

Satish Rana
quelle
Dein Versuch scheint gut zu sein. Sie benötigen eine Cache von Back - End zu spülen sowie die Cache - Datei manuell entfernen aus/var/cache
Praful Rajput

Antworten:

51

image url Syntax ist in Ordnung für beide static blockund phtml, aber stellen Sie sicher, dass Sie diesen Code in statischen Block schreiben

<img src="{{view url="images/slide-bg.jpg"}}" alt="test" />

am vorderen Ende sieht es so aus

http: //localhost/magento2new/pub/static/frontend/Magento/luma/en_US/images/slide-bg.jpg

Wo Magento/lumaist packageName und themeName, können Sie mit packageund themeNamen ersetzen

Man muss also aufpassen, dass slide-bg.jpges in

pub/static/frontend/Magento/luma/en_US/images Verzeichnis.

In Ihrem Fall,

<img src='<?php echo $this->getViewFileUrl('images/footer-logo.png'); ?>' alt="Demo">

Syntax scheint in Ordnung, aber im Frontend sieht es so aus

http: //localhost/magento2new/pub/static/frontend/Magento/luma/en_US/images/footer-logo.png

Sie müssen also sicherstellen, dass in footer-logo.pngvorhanden ist

pub/static/frontend/Magento/luma/en_US/images Verzeichnis.

Und nicht vergessen "[quotation marks]

Keyur Shah
quelle
viewfür pub/static/frontend/Namespace/theme/locale storefür Website-URL
Praful Rajput
15

Erstellen Sie für Ihr benutzerdefiniertes Modul eine Verzeichnisstruktur wie

Company/Module/view/frontend/web/images/image-icon.png

und in phtml benutze folgenden code

<img src='<?php echo $this->getViewFileUrl('Company_Module::images/image-icon.png'); ?>' alt="image-icon" width="30" height="25">
Manish
quelle
thx, sparte mir viel Zeit für die Suche: D
ZFNerd
@ ZFNerd Most Welcome
Manish
7

Einfache Lösung:

  1. Fügen Sie Ihr Bild in Ihren Magento 2-Pfad ein:

    /app/design/frontend/< Vendor >/< theme >/web/images
  2. Verwenden Sie diesen Code, um das Bild in der HTML-Datei aufzurufen:

    echo $block->getViewFileUrl('images/demo.jpg'); 
Deepak Bhatta
quelle
1

Wenn Sie die Dinge auch etwas übersichtlicher gestalten möchten, können Sie Bilder für Ihre überschriebenen Kernmodule unter Ihrem benutzerdefinierten Thema hinzufügen. Ich brauche zum Beispiel ein Bild für das Newsletter-Formular. Ich habe ein Bild in hinzugefügt

app/design/frontend/<Vendor>/<theme>/Magento_Newsletter/web/images/envelope.png

und in meiner app/design/frontend/<Vendor>/<theme>/Magento_Newsletter/templates/subscribe.phtmlDatei habe ich es wie unten verwendet, um die Bildquelle zu erhalten

$this->getViewFileUrl('Magento_Newsletter::images/envelope.png');

Ich benutze Magento v2.2

vkvkvk
quelle
0

Eine andere Möglichkeit ist die Verwendung eines Inline-Bildes:

<?php
// get contents of a file into a string
$filename = "path/to/image.jpg";
$handle = fopen($filename, "r");
$contents = fread($handle, filesize($filename));
$imagedata = base64_encode($content);
fclose($handle);
?>

<img src="data:image/jpeg;base64, <?= $imagedata; ?>" alt="alt text" />
Scott
quelle
0
$imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                        ->init($mainProduct, 'product_base_image')
                        ->constrainOnly(TRUE)
                        ->keepAspectRatio(TRUE)
                        ->keepTransparency(TRUE)
                        ->keepFrame(FALSE)
                        ->resize(281, 281)->getUrl();
Baharuni Asif
quelle