Magento 2.4 - product images & product names in the order history page on the customer account tab

Question

I want to load product images & product names in the order history page on the customer account tab

Answer 1

Use repository to load product

protected $_productRepositoryFactory;

public function __construct(
\Magento\Catalog\Api\ProductRepositoryInterfaceFactory 
$productRepositoryFactory
) {            
  $this->_productRepositoryFactory = $productRepositoryFactory;
}


$product = $this->_productRepositoryFactory->create()
->getById($item->getProductId());
$product->getData('image');
$product->getData('thumbnail');
$product->getData('small_image');

$product->getData('name');

Answer 2

Example\OrderHistory\Block\Order\History.php

<?php
/**
 * Copyright © Magento2.
 */

namespace Example\OrderHistory\Block\Order;

class History extends \Magento\Sales\Block\Order\History
{
    /**
     * @var \Magento\Catalog\Model\ProductFactory
     */
    private $productFactory;
    /**
     * @var \Magento\Catalog\Helper\Image
     */
    private $imageHelper;
    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\Sales\Model\ResourceModel\Order\CollectionFactory $orderCollectionFactory
     * @param \Magento\Customer\Model\Session $customerSession
     * @param \Magento\Sales\Model\Order\Config $orderConfig
     * @param array $data
     * @param \Magento\Catalog\Model\ProductFactory $productFactory
     * @param \Magento\Catalog\Helper\Image $imageHelper
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Sales\Model\ResourceModel\Order\CollectionFactory $orderCollectionFactory,
        \Magento\Customer\Model\Session $customerSession,
        \Magento\Sales\Model\Order\Config $orderConfig,
        array $data = [],
        \Magento\Catalog\Model\ProductFactory $productFactory,
        \Magento\Catalog\Helper\Image $imageHelper
    ) {
        parent::__construct($context, $orderCollectionFactory, $customerSession, $orderConfig, $data);
        $this->productFactory = $productFactory;
        $this->imageHelper = $imageHelper;
    }

    /**
     * @param object $pid
     * @return string
     */
    public function getProductImage($pid)
    {
        $product =  $this->productFactory->create()->load($pid);
        return $this->imageHelper->init($product, 'product_page_image_small')->
        setImageFile($product->getImage())->getUrl();
    }
}

Example\OrderHistory\etc\di.xml

<?xml version="1.0" ?>
<!--
/**
 * Copyright © Magento2.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Sales\Block\Order\History" type="Example\OrderHistory\Block\Order\History" />
</config>

Example\OrderHistory\etc\module.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento2.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Example_OrderHistory">
    </module>
</config>

Example\OrderHistory\view\frontend\templates\history.phtml

<?php
/**
 * Copyright © Magento2.
 */

/** @var \Magento\Sales\Block\Order\History $block */
?>
<?php $_orders = $block->getOrders(); ?>
<?= $block->getChildHtml('info') ?>
<?php if ($_orders && count($_orders)): ?>
    <?php foreach ($_orders as $_order): ?>
        <table>
            <tr>
            <tr>
                <td><?= /* @noEscape */ date("l jS  F Y", strtotime($_order->getCreatedAt())) ?></td>
                <td><b><?= $block->escapeHtml(__('#ID ')) ?>
                        <?= $block->escapeHtml($_order->getRealOrderId()) ?></b></td>
                <td><?= $block->escapeHtml(__('TOTAL PAID')) ?></td>
                <td><b><?= /* @noEscape */ $_order->formatPrice($_order->getGrandTotal()) ?></b></td>
            </tr>
            <tr>
                <td><b><?= $block->escapeHtml(__('Delivered To: ')) ?></b>
                    <?= $block->escapeHtml($_order->getBillingAddress()->getName()); ?></td>
            </tr>
            <tr>
                <td><b><?= $block->escapeHtml(__('Payment Method: ')) ?></b>
                    <?= $block->escapeHtml($_order->getPayment()->getAdditionalInformation("method_title")) ?></td>
            </tr>
            </tr>
            <tr>
                    <?php
                    $items = $_order->getAllVisibleItems();
                    foreach ($items as $item): ?>
                        <?php
                        $image_URl = $block->getProductImage($item->getProductId()); ?>
                            <tr>
                                <td>
                                    <img src="<?= /* @noEscape */ $image_URl;?>" />
                                </td>
                                <td>
                                    <?= /* @noEscape */ $block->escapeHtml($item->getName()) ?>
                                </td>
                            </tr>
                    <?php endforeach;?>
            </tr>
        </table>
    <?php endforeach;?>
<?php else: ?>
    <div><?= $block->escapeHtml(__("You don't have any orders yet!")) ?></div>
<?php endif ?>
<?php if ($block->getPagerHtml()): ?>
    <div class="order-products-toolbar toolbar bottom"><?= $block->getPagerHtml() ?></div>
<?php endif ?>

Example\OrderHistory\registration.php

<?php
/**
 * Copyright   © Magento2.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Example_OrderHistory',
    __DIR__
);