เพิ่มรูปแบบคงที่ในหน้า PHTML และบล็อก CMS: Magento2


33

ฉันจะเพิ่มรูปภาพนิ่งบนหน้า PHTML และบล็อก CMS ลงใน Magento2 ได้อย่างไร ใน Magento 1.x มันเป็นไปได้ที่จะใช้$this->getSkinUrl('images/xyz.jpg')

ฉันกำลังลองวิธีต่อไปนี้ใน Magento2

ในไฟล์ HTML:

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

15

สำหรับโมดูลที่กำหนดเองของคุณสร้างโครงสร้างไดเรกทอรีเช่น

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

และใน PHP ใช้รหัสต่อไปนี้

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

ขอบคุณช่วยฉันประหยัดเวลาได้มากในการค้นหา: D
ZFNerd

@ZFNerd ยินดีต้อนรับมากที่สุด
Manish

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.