Adicione uma imagem estática na página PHTML e nos CMS Blocks: Magento2

33

Como posso adicionar uma imagem estática na página PHTML e blocos CMS no Magento2? no Magento 1.x foi possível usar$this->getSkinUrl('images/xyz.jpg')

Estou tentando seguir o método no Magento2

No arquivo phtml:

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

Nos blocos CMS:

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

mas não está funcionando corretamente. Por favor me sugira meus erros

Satish Rana
fonte
Sua tentativa parece boa. Você precisa limpar o cache de back-end, bem como remover o arquivo de cache manualmente/var/cache
Praful Rajput

Respostas:

51

url da imagem A sintaxe é válida para ambos static blocke phtml, mas certifique-se de que quando você escrever esse código no bloco estático

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

no front-end parece

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

Onde Magento/lumaestá o packagenome e o themenome, você pode substituir por seu packagee themenome

Então você tem que cuidar slide-bg.jpgé existe em

pub/static/frontend/Magento/luma/en_US/images diretório.

No seu caso,

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

A sintaxe parece ok, mas no frontend Parece

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

Então você tem que ter certeza de que footer-logo.pngexiste

pub/static/frontend/Magento/luma/en_US/images diretório.

E não se esqueça "[quotation marks]

Keyur Shah
fonte
viewpara pub/static/frontend/Namespace/theme/locale storeURL do site
Praful Rajput 22/11
15

Para o seu módulo personalizado, crie uma estrutura de diretórios como

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

e em phtml use o seguinte código

<img src='<?php echo $this->getViewFileUrl('Company_Module::images/image-icon.png'); ?>' alt="image-icon" width="30" height="25">
Manish
fonte
thx, poupou-me muito tempo para pesquisar: D
ZFNerd
@ZFNerd Most Welcome
Manish
7

Solução fácil:

  1. Coloque sua imagem no seu caminho Magento 2:

    /app/design/frontend/< Vendor >/< theme >/web/images
  2. Use este código para chamar a imagem no arquivo phtml:

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

Se você também quiser manter as coisas um pouco mais organizadas, adicione imagens para seus módulos principais substituídos no seu tema personalizado. Por exemplo, preciso de uma imagem para o formulário do boletim informativo. Eu adicionei uma imagem em

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

e no meu app/design/frontend/<Vendor>/<theme>/Magento_Newsletter/templates/subscribe.phtmlarquivo eu usei como abaixo para obter a fonte da imagem

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

Eu uso o Magento v2.2

vkvkvk
fonte
0

Outra maneira de fazer isso é usar uma imagem embutida:

<?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
fonte
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
fonte