How to show product picture in OrderDetails page?

I found a method called GetProductVariantImageUrl in OrderSummary.ascx.cs, then I think it could be used in OrderDetails.ascx.cs to show pictures in OrderDetails page.

I changed the argument to fit the situation in OderDetails

public string GetProductVariantImageUrl(int productVariantId)
        {
            string pictureUrl = String.Empty;
            var productVariant = this.ProductService.GetProductVariantById(productVariantId);
//Original........

But when I came to OrderDetails.ascx, I found it is a different method to generate the products table, I added a template column:

<div class="products-box">
            <asp:GridView ID="gvOrderProductVariants" runat="server" AutoGenerateColumns="False"
                Width="100%">
                <Columns>
                    <asp:TemplateField HeaderText="123" HeaderStyle-HorizontalAlign="Center"
                        ItemStyle-HorizontalAlign="Left">
                        <ItemTemplate>
                          <asp:Image ID="iProductVariantPicture" runat="server" ImageUrl='<%#GetProductVariantImageUrl(Convert.ToInt32(Eval("ProductVariantId")))%>'
                                AlternateText="Product picture" />
                        </ItemTemplate>
                    </asp:TemplateField>
//Original

At last, I ran the project and saw a strange table like this:


SKU              Download           Price                 Quantity        Total
                            n/a                $23.00 (USD)               1          $23.00 (USD)

Problem solved.
OrderDetails.ascx.cs:

//sku column
            gvOrderProductVariants.Columns[1].Visible = this.SettingManager.GetSettingValueBoolean("Display.Products.ShowSKU");
            //downloads column
            gvOrderProductVariants.Columns[3].Visible = hasDownloadableItems && !this.IsInvoice;

After adding a column by myself, the index of other columns changed!