首页 > 解决方案 > 在asp.net中将字节转换为图像时显示[object Object]的图像位置

问题描述

我在 asp.net C# 中通过FromBase64String方法从字节转换图像并放置在gridview字段中,但在 gridview 中它显示 [object object] 数据代替图像。

为了更清楚,让我们看看图像,

在此处输入图像描述

这是 CustomerMortgageModel 模型,

public class CustomerMortgageModel
{
    public Image DesignImage;        
}

这是前端代码,

[WebMethod]
public static List<CustomerMortgageModel> GetProductList()
{
    string constr = ConfigurationManager.ConnectionStrings["connection"].ConnectionString;

    List<CustomerMortgageModel> customers = new List<CustomerMortgageModel>();
    Service service = new Service();

    using (SqlConnection con = new SqlConnection(constr))
    {
        string qrySelProductDetail = "select * from tbl_MortageDetail " + System.Environment.NewLine;
        
        using (SqlCommand cmd = new SqlCommand(qrySelProductDetail, con))
        {
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    // Setup image and get data stream together
                    System.Drawing.Image img;
                    System.IO.MemoryStream MS = new System.IO.MemoryStream();

                    if (sdr["DesignImage"].ToString() != "")
                    {
                        string k = "i" + sdr["DesignImage"].ToString();
                        string b64 = k.Replace(" ", "+");
                        byte[] b;

                        // Converts the base64 encoded msg to image data
                        b = Convert.FromBase64String(b64);
                        MS = new System.IO.MemoryStream(b);

                        //creates image
                        img = System.Drawing.Image.FromStream(MS);
                    }
                    else
                    {
                        img = null;
                    }
                    customers.Add(new CustomerMortgageModel
                    {
                             DesignImage = img
                    });
                }
            }
            con.Close();
        }
        
    }
    return customers;
}

后端代码,

<asp:GridView ID="gv_productdetail" runat="server" CssClass="display compact" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Image">  
            <ItemTemplate>  
                <img src="data:image/jpeg;base64,<%# Eval("DesignImage") %>" />
            </ItemTemplate>  
        </asp:TemplateField>  

    </Columns>
</asp:GridView>

标签: asp.netimagegridviewwebmethodtobase64string

解决方案


好吧,你没有注意到数据库列的格式,但假设我们有这个标记:

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField HeaderText="Animal Name" DataField="Animal" />

                <asp:TemplateField HeaderText="Picture">
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" 
                            Height="128px" Width="128px"
        src ='<%# "Data:Image/png;base64," + Convert.ToBase64String((byte[])Eval("ImageB")) %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

请注意我是如何将表达式放在标记中的。因此,现在加载网格的代码将如下所示:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) {
            LoadGrid();
        }
    }

    void LoadGrid()
    {
        using (SqlCommand cmdSQL = new SqlCommand("SELECT Animal, ImageB from tblAnimals",
            new SqlConnection(Properties.Settings.Default.TEST4)))
        {
            cmdSQL.Connection.Open();
            GridView1.DataSource = cmdSQL.ExecuteReader();
            GridView1.DataBind();
        }
    }

输出:

在此处输入图像描述

所以,这里真的没有必要使用流阅读器。我假设您的示例标记是针对此帖子的 - 并且缺少一些数据绑定字段。

但是,您可以推/折腾/使用 sql 命令对象的数据读取器对象。无需在这里循环。

这实际上取决于您背后的附加代码是什么样的。如果您正在使用额外的数据行,那么我建议您考虑使用数据表,因为行数据绑定事件,您可以充分使用该数据行。

所以,你可以考虑这个:

           cmdSQL.Connection.Open();
            DataTable rstData = new DataTable();
            rstData.Load(cmdSQL.ExecuteReader());

            GridView1.DataSource = rstData;
            GridView1.DataBind();

但是,如果您在行数据绑定事件期间需要完整的数据行(我不知道您是否正在使用),我只会在上面提出建议。

但是,您当然不需要像您发布的那样多的代码来执行此操作。我假设上面的 sql 数据列类型是“图像”,如果它也是二进制类型,上面也应该工作。


推荐阅读