รับ URL ภาพเต็มของผลิตภัณฑ์ในแม่แบบ


23

ฉันกำลังพยายามสร้างบล็อกแบบคงที่เพื่อแสดงผลิตภัณฑ์แบบไดนามิก นี่คือรหัสที่คาดว่าจะได้รับเด็กทุกประเภทและพิมพ์ภาพสำหรับแต่ละผลิตภัณฑ์ในแต่ละหมวดหมู่

<?php
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
    ?><ol><?php
    foreach ($category->getChildrenCategories() as $child_category) {
        ?><li>
            <ul><?php
                foreach ($child_category->getProductCollection() as $product) {
                    ?><li><img src="<?php echo $product->getImage();?>"/><li><?php
                }
            ?></ul>
        </li><?php
    }
    ?></ol>

มันเกือบจะทำงานยกเว้น img srcs เป็นเพียง "/a/b/ab001.jpg" เป็นตัวอย่างและไม่ใช่เส้นทางแบบเต็มเช่น "/ pub / media / catalog / product / cache / 1 / small_image / 240x300 / abc123def456 / a / b / 001.jpg "จึงไม่พบรูปภาพ วิธีที่ถูกต้องในการรับภาพผลิตภัณฑ์คืออะไร?


1
อย่าพยายามใช้ Object Manager โดยตรงบนแม่แบบของคุณ เราควรสร้างฟังก์ชั่นบล็อกใหม่หรือฟังก์ชั่นที่มีอยู่อีกครั้ง
Khoa TruongDinh

คำตอบ:


28

หากบล็อกของคุณขยายMagento\Catalog\Block\Product\AbstractProductคุณสามารถใช้:

$imageType = 'category_page_list'; // choose which image
$image = $block->getImage($product, $imageType);

จากนั้นรับ URL ภาพด้วย

$image->getImageUrl();

หรือถ้าคุณต้องการที่จะเอาท์พุทมันเป็น<img>องค์ประกอบ:

echo $image->toHtml();

หากบล็อกของคุณไม่ได้ / ไม่สามารถขยายบล็อกผลิตภัณฑ์แบบนามธรรมคุณสามารถสร้างgetImage()วิธีการด้วยตัวเอง:

public function getImage($product, $imageId)
{
    return $this->imageBuilder->setProduct($product)
        ->setImageId($imageId)
        ->create();
}

$this->imageBuilder จะต้องถูกฉีดเป็น Magento\Catalog\Block\Product\ImageBuilder


ตัวอย่างเช่นตัวแปร$imageTypeหรือ$imageIdควรเป็นหนึ่งในประเภทรูปภาพที่กำหนดไว้ในธีมcategory_page_listตัวแปรที่ควรจะเป็นหนึ่งในประเภทภาพที่กำหนดไว้ในรูปแบบเช่น

ดู app/design/frontend/Magento/luma/etc/view.xmlประเภทรูปภาพทั้งหมดในชุดรูปแบบ Luma

ใน Magento 2 รูปภาพเหล่านี้จะใช้แทนการกำหนดความกว้างและความสูงในเทมเพลตโดยตรง


ฉันลองใช้รหัสของคุณ แต่ฉันได้รับข้อผิดพลาดนี้Uncaught Magento\Framework\View\Asset\File\NotFoundException: Unable to resolve the source file for 'adminhtml/_view/en_US/Magento_Catalog/images/product/placeholder/.jpg'
ND17

@ ND17 คำถามสองข้อ: 1) คุณใช้บล็อกในพื้นที่ผู้ดูแลระบบหรือไม่ รหัสนี้มีไว้สำหรับส่วนหน้าเท่านั้น 2) คุณได้กำหนดค่ารูปภาพตัวแทนไว้หรือไม่ หากไม่มีและผลิตภัณฑ์ไม่มีภาพคุณจะได้รับข้อผิดพลาดเสมอ
Fabian Schmengler

1
หนึ่ง @davideghz category_page_listประเภทภาพที่กำหนดไว้ในรูปแบบเช่น ดู: github.com/magento/magento2/blob/…ใน Magento 2 คุณใช้สิ่งเหล่านี้แทนการกำหนดความกว้างและความสูงโดยตรงในแม่แบบ
Fabian Schmengler

3
ความคิดใดว่าเหตุใดจึงนำกลับมาที่ตัวยึดตำแหน่งแทนรูปภาพที่กำหนด
ลอร่า

2
ฉันมีปัญหาเช่นเดียวกับ @Laura มันจะส่งคืนรูปภาพตัวแทนแทนรูปภาพที่กำหนดไว้ (รูปภาพที่กำหนดจะปรากฏอย่างสมบูรณ์ในรายการผลิตภัณฑ์หรือหน้ารายละเอียดผลิตภัณฑ์ทั่วไป)
fritzmg

9

หากคุณต้องการปรับขนาดภาพผลิตภัณฑ์และใช้ระบบแคชภาพ Magento ที่เป็นค่าเริ่มต้นและคุณไม่ได้อยู่ในส่วนหน้าคุณสามารถใช้วิธีแก้ปัญหานี้

กรณีการใช้งาน: อาจเป็นประโยชน์หากคุณต้องการปรับขนาด URL ภาพใน API ที่กำหนดเองของคุณสำหรับแอปพลิเคชันภายนอก

รหัสฟังก์ชั่น:

/**
 * @var \Magento\Catalog\Model\ProductFactory
 */
protected $productFactory;

/**
 * @var \Magento\Catalog\Helper\ImageFactory
 */
protected $helperFactory;

/**
 * @var \Magento\Store\Model\App\Emulation
 */
protected $appEmulation;

/**
 * Constructor.
 *
 * @param \Magento\Catalog\Model\ProductFactory $productFactory
 * @param \Magento\Store\Model\App\Emulation $appEmulation
 * @param \Magento\Catalog\Helper\ImageFactory $helperFactory
 * @param \Magento\Store\Model\StoreManagerInterface $storeManager
 */
public function __construct(
    \Magento\Catalog\Model\ProductFactory $productFactory,
    \Magento\Store\Model\App\Emulation $appEmulation,
    \Magento\Catalog\Helper\ImageFactory $helperFactory,
    \Magento\Store\Model\StoreManagerInterface $storeManager,
) {
    $this->productFactory                   = $productFactory;
    $this->imageBuilder                     = $imageBuilder;
    $this->helperFactory                    = $helperFactory;
    $this->appEmulation                     = $appEmulation;
    $this->storeManager                     = $storeManager;
}

/**
 * Retrieve product image
 *
 * @param \Magento\Catalog\Model\Product $product
 * @param string $imageId
 * @param array $attributes
 * @return \Magento\Catalog\Block\Product\Image
 */
public function getImage($product, $imageId, $attributes = [])
{
    $image = $this->helperFactory->create()->init($product, $imageId)
        ->constrainOnly(true)
        ->keepAspectRatio(true)
        ->keepTransparency(true)
        ->keepFrame(false)
        ->resize(200, 300);

    return $image;
}

public function customFunction()
{
    // some stuff here

    $storeId = $this->storeManager->getStore()->getId();

    $this->appEmulation->startEnvironmentEmulation($storeId, \Magento\Framework\App\Area::AREA_FRONTEND, true);

    $product = $this->productFactory->create()->loadByAttribute('sku', 'productSKU');
    $imageUrl = $this->getImage($product, 'product_base_image')->getUrl();

    echo $imageUrl;

    $this->appEmulation->stopEnvironmentEmulation();

    // some stuff here
}

ตัวอย่างผลลัพธ์:

http://{domain}/media/catalog/product/cache/1/image/200x300/e9c3970ab036de70892d86c6d221abfe/s/r/{imageName}.jpg

ความคิดเห็นที่:

พารามิเตอร์ที่สามของฟังก์ชันstartEnvironmentEmulationใช้เพื่อบังคับใช้พื้นที่ส่วนหน้าหากคุณอยู่ใน storeId เดียวกันอยู่แล้ว (มีประโยชน์สำหรับพื้นที่ API)

วิธีหลีกเลี่ยงปัญหานี้ทำให้คุณมีข้อผิดพลาดประเภทนี้:

http://XXXX.com/pub/static/webapi_rest/_view/en_US/Magento_Catalog/images/product/placeholder/.jpg

Uncaught Magento\Framework\View\Asset\File\NotFoundException: Unable to resolve the source file for 'adminhtml/_view/en_US/Magento_Catalog/images/product/placeh‌​older/.jpg'

1
ขอบคุณสำหรับเคล็ดลับในการจำลองสภาพแวดล้อมสิ่งที่ฉันต้องการ
thaddeusmt

2
การจำลองสภาพแวดล้อมช่วยชีวิตฉันไว้ ขอบคุณมาก!
medina

+1 สำหรับประโยชน์ของ API
โทนี่

8

ลองมัน

$store = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore();
$imageUrl = $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'catalog/product' . $product->getImage();

1
อันนี้ดีเพราะจะให้ URL ที่ปลอดภัย / ไม่ปลอดภัยตามคำขอปัจจุบันโดยอัตโนมัติ
Milan Simek

3

ลองรหัสนี้ ..

$ProductImageUrl = $block->getUrl('pub/media/catalog').'product'.$_product->getImage();

ยินดีต้อนรับสู่ Magento SE คำตอบที่มีโค้ดเพียงบรรทัดเดียวมักไม่ค่อยมีประโยชน์ ในกรณีนี้มันค่อนข้างชัดเจนว่าควรใช้บรรทัดนี้อย่างไร แต่การใช้getUrl()นั้นไม่ถูกต้องแม้ว่ามันจะทำงานโดยไม่ตั้งใจก็ตาม ใช้$routeพารามิเตอร์ในแบบฟอร์ม "module / controller / action" "pub / media / catalog" ดูเหมือนเส้นทาง แต่ไม่ใช่
เฟเบียน Schmengler

ไม่ใช้ตัวจัดการวัตถุคำตอบที่ดี แม้ว่าจะมีเพียงหนึ่งบรรทัด
LM_Fielding

@LM_Fielding ทุกคำตอบที่ไม่ได้ใช้ตัวจัดการวัตถุนั้นดีโดยอัตโนมัติ
Fabian Schmengler

ลองใช้รหัสนี้และโพสต์ความคิดเห็นของคุณ
Shihas Suliaman

1

อาจMagento\Catalog\Helper\Product::getImageUrl()ช่วยได้ ฉันไม่เข้าใจว่าเพราะเหตุใดนักพัฒนา Magento จึงไม่ใช้มันในMagento\Catalog\Helper\Imageชั้นเรียนเนื่องจากgetUrlวิธีการใช้ตัวช่วยสร้างภาพไม่ส่งคืนสิ่งที่เราคาดหวัง ...


1

กรุณาลองรหัสนี้:

$prdId = 35;
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$hotPrd = $objectManager->get('Magento\Catalog\Model\Product')->load($prdId);
$store = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore();
echo $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'catalog/product' . $hotPrd->getThumbnail();

1

คุณสามารถใช้ ObjectManager หรือ Block

ผู้จัดการ:

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$store = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore();
$imageUrl = $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'catalog/product' . $product->getImage();

บล็อก:

protected $_storeManagerInterface;

public function __construct(
  ...
  \Magento\Store\Model\StoreManagerInterface $storeManagerInterface,
  ...
)
{
  ...
  $this->_storeManagerInterface = $storeManagerInterface;
  ...
}

...

public function getStoreInterface($imgUrl){
   $store = $this->_storeManagerInterface->getStore();
   $storeMedia = $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'catalog/product' . $imgUrl;
   return $storeMedia;
}
...

เรียกใช้ฟังก์ชัน:

<img src="<?php echo $block->getStoreInterface($imgUrl) ?>"/>

0

ลองรหัสนี้

<img class="test-image" alt="image" src="<?php echo $block->getUrl('pub/media/catalog/product', ['_secure' => $block->getRequest()->isSecure()]).$product->getImage();?>" />

หวังว่านี่จะช่วยคุณได้


นี่คือการเพิ่ม src ของ " domain.com/pub/media/catalog//a/b/ab001.jpg " ซึ่งไม่สามารถพบได้
Alex

ไม่มีไดเรกทอรีผลิตภัณฑ์
LM_Fielding

0

ในโมดูลของคุณ:

public function getProducts()
{
    //... create collection code goes here...

    $result = [ ];

    foreach ( $collection as $product ) {
        $result[] = [
            'id'        => $product->getId(),
            '_sku'      => $product->getSku(),
            'permalink' => $product->getProductUrl($product),
            'title'     => $product->getName(),
            'raw_price' => $product->getPrice(),
            'image_url' => $this->getUrl().'pub/media/catalog/product'.$product->getImage()
        ];
    }

    return $result;
}

จากนั้นในบล็อกของคุณคุณจะได้รับผลลัพธ์นี้:

print_r($block->getProducts());

มันไม่สมบูรณ์แบบ แต่ใช้งานได้สำหรับฉัน

ดูผลลัพธ์: ป้อนคำอธิบายรูปภาพที่นี่


0

ในชั้นเรียนของคุณฉีดพึ่งพา StoreManagerInterface เช่น

use \Magento\Framework\View\Element\Template\Context;
use \Magento\Store\Model\StoreManagerInterface;

public function __construct(Context $context, StoreManagerInterfac $storeManager)
    {
        parent::__construct($context);
        $this->_storeManager = $storeManager;

    }

หลังจากในวิธีการของคุณสำหรับรับ thumbail เช่น

public function getProductThumbnail(){

        return $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'catalog/product' . $product->getImage();
    }

0

คุณสามารถลองรหัสด้านล่างนี้

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
$childcategories = $category->getChildrenCategories();

foreach($childcategories as $child)
    {
echo '<li class="sub-cat">';
        $cat = $objectManager->create('Magento\Catalog\Model\Category')->load($child->getId()); 
        ?>
        <a href="<?php echo $cat->getUrl(); ?>">
        <div class="sub-title">
            <h3><?php echo $cat->getName();?></h3>
        </div> 
    <?php
        if ($_imgUrl = $cat->getImageUrl())
        {
            $_imgHtml = '<div class="category-image"><img src="' . $_imgUrl . '" alt="' . $block->escapeHtml($cat->getName()) . '" title="' . $block->escapeHtml($cat->getName()) . '" class="image" /></div>';
            $_imgHtml = $_helper->categoryAttribute($cat, $_imgHtml, 'image');
            /* @escapeNotVerified */ echo $_imgHtml;
        }  

    ?>      
    <?php echo '</a></li>'; }
    echo '</ul>';
}

0

นี่เป็นวิธีการทำงานอื่น:

/** @var \Magento\Framework\UrlInterface $urlManager */
$url = $urlManager->getDirectUrl('pub/media/catalog/product' . $product->getImage());

หรือเคารพ URL ที่ปลอดภัย / ไม่ปลอดภัยตามคำขอปัจจุบัน:

/** @var \Magento\Framework\UrlInterface $urlManager */
/** @var \Magento\Framework\App\RequestInterface $request */
$url = $urlManager->getDirectUrl(
    'pub/media/catalog/product' . $product->getImage(),
    ['_secure' => $request->isSecure()]
);

ฉันจะปล่อยให้วัตถุจินตนาการของคุณเอง


0

เราสามารถรับ Base Image url ในไฟล์ phtml

$_objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$imageHelper  = $_objectManager->get('\Magento\Catalog\Helper\Image');
<?php $image_url = $imageHelper->init($product, 'product_base_image')->setImageFile($product->getFile())->resize($imagewidth, $imageheight)->getUrl(); ?>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.