Додайте статичне зображення на сторінку PHTML та блоки CMS: Magento2


33

Як я можу додати статичне зображення на сторінку PHTML та блоки CMS до Magento2? в Magento 1.x можна було використовувати$this->getSkinUrl('images/xyz.jpg')

Я намагаюся наступним методом в Magento2

У файлі Phtml:

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

У блоках CMS:

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

але це не працює належним чином. Підкажіть, будь ласка, мої помилки


Ваша спроба здається гарною. Вам потрібно очистити кеш із бекенда, а також видалити кеш-файл вручну з/var/cache
Praful Rajput

Відповіді:


51

Синтаксис URL-адреси зображення нормальний для обох, static blockта phtmlпереконайтесь, що коли ви пишете цей код у статичному блоці

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

на передньому кінці це схоже

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

Де Magento/lumaце packageім'я і themeім'я, ви можете замінити з packageі themeім'ям

Таким чином, ви повинні подбати про те, щоб slide-bg.jpgіснувати в

pub/static/frontend/Magento/luma/en_US/images каталог.

У вашому випадку,

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

Синтаксис здається нормальним, але на фронті це виглядає так

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

Таким чином, ви повинні переконатися, що вони footer-logo.pngіснують

pub/static/frontend/Magento/luma/en_US/images каталог.

І не забувай про це "[quotation marks]


viewдля pub/static/frontend/Namespace/theme/locale storeURL-адреси веб-сайту
Praful Rajput

15

Для власного модуля створіть структуру каталогів на кшталт

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

а в phtml використовувати наступний код

<img src='<?php echo $this->getViewFileUrl('Company_Module::images/image-icon.png'); ?>' alt="image-icon" width="30" height="25">

THX, врятувало мені багато часу на пошуки: D
ZFNerd

@ZFNerd Найпривітальніші
Маніш

7

Просте рішення:

  1. Покладіть зображення на свій шлях Magento 2:

    /app/design/frontend/< Vendor >/< theme >/web/images
  2. Використовуйте цей код для виклику зображення у файлі phtml:

    echo $block->getViewFileUrl('images/demo.jpg'); 

1

Якщо ви також хочете, щоб речі були трохи організованішими, ви можете додати зображення для перекритих основних модулів під власну тему. Наприклад, мені потрібне зображення для форми бюлетеня. Я додав зображення в

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

і в моєму app/design/frontend/<Vendor>/<theme>/Magento_Newsletter/templates/subscribe.phtmlфайлі я використовував його, як нижче, щоб отримати джерело зображення

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

Я використовую Magento v2.2


0

Ще один спосіб зробити це за допомогою вбудованого зображення:

<?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" />

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();
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.