Agregue una imagen estática en la página PHTML y los bloques CMS: Magento2

33

¿Cómo puedo agregar una imagen estática en la página PHTML y los bloques CMS en Magento2? en Magento 1.x fue posible usando$this->getSkinUrl('images/xyz.jpg')

Estoy intentando seguir el método en Magento2

En archivo phtml:

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

En bloques CMS:

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

Pero no funciona correctamente. Por favor sugiereme mis errores

Satish Rana
fuente
Tu intento parece bueno. Debe vaciar su caché del back-end y eliminar el archivo de caché manualmente/var/cache
Praful Rajput

Respuestas:

51

La sintaxis de url de imagen está bien para ambos static blocky phtml, pero asegúrese de que cuando escriba este código en bloque estático

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

en la parte frontal parece

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

Donde Magento/lumaes packageel nombre y themeel nombre, puede reemplazar con su packagey themenombre

Así que hay que cuidar slide-bg.jpges existir en

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

En tu caso,

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

La sintaxis parece estar bien, pero en la interfaz parece que

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

Así que debes asegurarte de que footer-logo.pngexista en

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

Y no te olvides de "[quotation marks]

Keyur Shah
fuente
viewpara la pub/static/frontend/Namespace/theme/locale storeURL del sitio
Praput Rajput
15

Para su módulo personalizado, cree una estructura de directorios como

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

y en phtml usa el siguiente código

<img src='<?php echo $this->getViewFileUrl('Company_Module::images/image-icon.png'); ?>' alt="image-icon" width="30" height="25">
Manish
fuente
gracias, me ahorró mucho tiempo para buscar: D
ZFNerd
@ZFNerd Muy bienvenido
Manish
7

Solución fácil:

  1. Pon tu imagen en tu ruta de Magento 2:

    /app/design/frontend/< Vendor >/< theme >/web/images
  2. Use este código para llamar a la imagen en el archivo phtml:

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

Si también desea mantener las cosas un poco más organizadas, puede agregar imágenes para sus módulos centrales anulados bajo su tema personalizado. Por ejemplo, necesito una imagen para el formulario del boletín. Agregué una imagen en

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

y en mi app/design/frontend/<Vendor>/<theme>/Magento_Newsletter/templates/subscribe.phtmlarchivo lo usé como a continuación para obtener la fuente de la imagen

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

Yo uso Magento v2.2

vkvkvk
fuente
0

Otra forma de hacer esto es usar una imagen en línea:

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