Images are not loading on my overwritten orders page

I wanted to call product images on the orders and order details page. On the order details page it is showing images correctly. However, i am not being able to call images of products to the orders page.
What i did:
i have called orders and products inside this loop:

{foreach from=$orders item=“o”}
{assign var=“order_info” value=fn_get_order_info($o.order_id)}
{foreach from=$order_info.products item=“product” key=“key”}
{hook name=“orders:items_list_row”}
{if !$product.extra.parent}

and i called images inside this loop as following:

{hook name="products:layout_content"}
                        <div class="flex-container-row order-list-inner-container">
                            <div class="order-list-product-img">
                                {assign var="currentItem" value=$product}
                                {$products = $order_info.product_groups[0].products}
                                {foreach from=$products item="product" key="key"}
                                    {if $product}
                                        {if $key == $currentItem.item_id}
                                            {hook name="orders:product_icon"}
                                                <a class="bordered-image-on-order-list" href="{"products.view?product_id=`$product.product_id`"|fn_url}">
                                                    {include file="common/image.tpl"

Please, can you help me some solution on this, As i know it works if there is only one order, but if there are many orders on this page it is not showing images.