Добавьте статическое изображение на страницу 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 storeсайта URL
Praful Раджпут

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

спасибо, сэкономил мне много времени для поиска: D
ZFNerd

@ZFNerd Most Welcome
Маниш,

7

Простое решение:

  1. Поместите свое изображение на Ваш Magento 2 Path:

    /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.