动态显示数据库中的图像答案

【问题标题】：Dynamic Display of Images from Database动态显示数据库中的图像
【发布时间】：2016-10-13 14:56:07
【问题描述】：

将应用程序从与其他要显示的项目一起存储的固定数量的图像重新设计为存储在第二个表中的可变数量的图像。

找到这个问题并开始修改，但有点迷失：ASP.Net Display Images in a GridView span across columns and rows? Using C#

我已经为 asp.net 页面构建了 datalist 控件，但知道路径项不起作用：

 <asp:DataList ID="dlImages" runat="server"
    RepeatColumns ="2"
    RepeatDirection ="Horizontal"
    RepeatLayout ="Flow">

    <ItemTemplate>
        <asp:Image ID="ImageQ" runat="server" Width="150px" ImageUrl='<%# Bind("ImageFile", "~/photo/{0}") %>' />
    </ItemTemplate>
</asp:DataList>

但是我在尝试将数据放入此列表时迷失了方向。最初图像数据是通过以下方式与其他信息一起加载的：

protected void Page_Load(object sender, EventArgs e)
{
    string sConstr = ConfigurationManager.ConnectionStrings["CS1"].ConnectionString;
    SqlConnection Conn = new SqlConnection(sConstr);

    using (Conn)
    {
        SqlCommand command = new SqlCommand("QuestionDetail", Conn);
        command.CommandType = CommandType.StoredProcedure;
        command.Parameters.Add(new SqlParameter("@QuestionID", SqlDbType.BigInt));
        command.Parameters["@QuestionID"].Value = Convert.ToInt32(Request["Id"]);
        Conn.Open();
        SqlDataReader reader = command.ExecuteReader();

        while (reader.Read())
        {
            byte[] imgBytes = (byte[])reader["ImageFile"];
            string encodedBytes = Convert.ToBase64String(imgBytes);
            string url = string.Concat("data:image/jpg;base64,", encodedBytes);
            Image1.ImageUrl = url;

            byte[] imgBytes2 = (byte[])reader["ImageFile2"];
            string encodedBytes2 = Convert.ToBase64String(imgBytes2);
            string url2 = string.Concat("data:image/jpg;base64,", encodedBytes2);
            Image2.ImageUrl = url2;

            byte[] imgBytes3 = (byte[])reader["ImageFile3"];
            string encodedBytes3 = Convert.ToBase64String(imgBytes3);
            string url3 = string.Concat("data:image/jpg;base64,", encodedBytes3);
            Image3.ImageUrl = url3;

            byte[] imgBytes4 = (byte[])reader["ImageFile4"];
            string encodedBytes4 = Convert.ToBase64String(imgBytes4);
            string url4 = string.Concat("data:image/jpg;base64,", encodedBytes4);
            Image4.ImageUrl = url4;

            txt_QuestionID.Text = reader["Id"].ToString();
            txt_author.Text = reader["Author"].ToString();               
            txt_Date.Text = reader["SubmitDate"].ToString();               
            txt_Stem.Text = reader["Stem"].ToString();

            txt_RespA.Text = reader["RespA"].ToString();
            txt_RespB.Text = reader["RespB"].ToString();
            txt_RespC.Text = reader["RespC"].ToString();
            txt_RespD.Text = reader["RespD"].ToString();
            txt_RespE.Text = reader["RespE"].ToString();

            txt_Answer.Text = reader["Answer"].ToString();
            txt_Critique.Text = reader["Critique"].ToString();
            txt_KeyObjective.Text = reader["KeyObjective"].ToString();

            txt_References.Text = reader["References"].ToString();
            txt_Practice1.Text = reader["PracticeArea1"].ToString();
            txt_Practice2.Text = reader["PracticeArea2"].ToString();
            txt_Practice3.Text = reader["PracticeArea3"].ToString();
            txt_Practice4.Text = reader["PracticeArea4"].ToString();

            txt_IsCloneOf.Text = reader["IsCloneOf"].ToString();
        }

        reader.Close();
    }
}

我已将图像部分取出，并尝试通过单独的代码块将它们处理到 DataList（并将文本元素保持原样），并有一个存储过程来获取适用的记录。

页面加载的这一部分根据附加到每个问题的图像数量正确加载占位符，但是如何读取编码图像而不是传递路径.....：

DataTable dt = new DataTable();
                using (Conn)
                {
                    SqlCommand ad = new SqlCommand("ImageDetail", Conn);
                    ad.CommandType = CommandType.StoredProcedure;
                    ad.Parameters.Add(new SqlParameter("@QuestionID", SqlDbType.BigInt));
                    ad.Parameters["@QuestionID"].Value = Convert.ToInt32(Request["Id"]);
                    SqlDataReader reader2 = command.ExecuteReader();
                    while (reader2.Read())
                    {
                        if(!Convert.IsDBNull(reader2["ImageFile"]))
                        { 
                        byte[] imgBytes = (byte[])reader2["ImageFile"];
                        string encodedBytes = Convert.ToBase64String(imgBytes);
                        string url = string.Concat("data:image/jpg;base64,", encodedBytes);
                        }
                    }
                    reader2.Close();
                    dt.Load(reader2);
                }
                dlImages.DataSource = dt;
                dlImages.DataBind();

仍然是个菜鸟，每次我更改控件时，我都需要一段时间才能弄清楚如何使用新控件。现在代码将运行没有错误，，但也没有图像。我不得不添加对“IsDBNULL”的检查，因为我不断收到这个错误。我知道 ImageDetail 存储过程正在访问的表在任何记录中的空值为零，并且存储过程在输入 QuestionID 时返回记录。

【问题讨论】：

这是一个有效的答案。因此，将您的代码与该代码进行比较并按照步骤操作，您应该会在这里找到您错过的内容stackoverflow.com/a/33694399/2946329
@S.Akbari 我遇到的问题之一是，在您链接到的问题和我在问题中引用的问题中，两者都在提取图像地址。我在数据库中编码了必须从编码数据中检索和显示的图像。我不知道如何将我在原始应用中使用的阅读器合并到其他两个帖子的结构中。
@S.Akbari 编辑问题以尝试使问题更清晰
@S.Akbari - 实际上是我从 Stack Overflow 上找到的一些帖子处理了我在提取用 SQL 编码而不是从文件夹结构链接的图像时遇到的特定问题。由于我们处理的图像是由公众提交的，我们无法控制我们决定将图像编码为的名称，因此您用自己的 Image1 覆盖我的“Image1”的可能性为零。

标签： c# asp.net

【解决方案1】：

终于搞明白了。

数据列表控件：

<asp:DataList ID="dlImages" runat="server"
RepeatColumns ="2"
RepeatDirection ="Vertical"
CellSpacing ="20"
RepeatLayout ="Table">

<ItemTemplate>
 <asp:Image ID="Image1" runat="server" Height="200px" ImageUrl='<%# "GetImage.aspx?id=" + System.Convert.ToString(Eval("ImageID")) %>' /><br />
 <asp:Label ID="Label1" runat="server" Text='<%# Eval("ImageName") %>' Font-Bold="True" Font-Size="1.2em" ForeColor="Navy"/><br />
 <asp:Label ID="Label2" runat="server" Text='<%# Eval("ImageContent") %>' Font-Italic="true"/><br /> <br />
</ItemTemplate>

用于填充的数据表定义（注意数据源之前在页面加载事件中定义）：

DataTable dt = new DataTable();
                using (Conn)
                {
                    SqlDataAdapter ad = new SqlDataAdapter("SELECT QuestionID, Images2.ImageID, ImageFile, ImageContent, ImageName, SEQ_NUM from qimages join Images2 on qimages.imageid = images2.imageid where QuestionID = @QuestionID", Conn);
                    ad.SelectCommand.Parameters.Add("QuestionID", SqlDbType.BigInt).Value = txt_QuestionID.Text;
                    ad.Fill(dt);
                }
                dlImages.DataSource = dt;
                dlImages.DataBind();

最后是“GetImage.aspx”页面的代码，用于检索图像并将其传递给数据列表。本页仅使用后面的代码：

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string sImageID = Request.QueryString["id"];

            string constr = ConfigurationManager.ConnectionStrings["CS1"].ConnectionString;
            string sQuery = "SELECT ImageFile from Images2 WHERE ImageID = @ImageID";

            SqlConnection con = new SqlConnection(constr);
            SqlCommand cmd = new SqlCommand(sQuery, con);

            cmd.Parameters.Add("@ImageID", SqlDbType.Int).Value = Int32.Parse(sImageID);

            using (con)
            {
                con.Open();
                SqlDataReader DR = cmd.ExecuteReader();

                if (DR.Read())
                {
                    byte[] imgData = (byte[])DR["ImageFile"];
                    Response.BinaryWrite(imgData);
                }
            }
        }
    }

这正在根据正在查看的问题在两列中显示数据库编码的图像。

谢谢大家的指点。

【讨论】：