Getting error retrieving sql image from c# application

Question

I'm getting an error when trying to load and display a table of images:

data:image/jpg;base64,U3lzdGVtLkJ5dGVbXQ== ' cannot load image because of an error'

My SQL DB has a FileName(nvarhcar) Content(image) and ContentType (nvarchar)

Hopefully someone can help me learn why the image is not displaying. Thanks

Update c# to load image

        protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["User"] == null)
                Response.Redirect("../Login.aspx");

            sqlcon.Open();
            SqlCommand cmd = sqlcon.CreateCommand();
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = "SELECT * FROM BluePrints";

            cmd.ExecuteNonQuery();


            DataTable dt = new DataTable();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            gvImages.DataSource = dt;
            gvImages.DataBind();

            sqlcon.Close();
        }

        protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DataRowView dr = (DataRowView)e.Row.DataItem;
                string imageUrl = "data:image/jpg;base64," + 
                Convert.ToBase64String((byte[])dr["Content"]);
                (e.Row.FindControl("Image1") as Image).ImageUrl = imageUrl;
            }
        }
    }
}

  <asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound" Height="192px" Width="915px">
    <Columns>
      <asp:BoundField DataField="ID" HeaderText="ID" />
      <asp:BoundField DataField="FileName" HeaderText="Name" />
      <asp:TemplateField HeaderText="Image">
        <ItemTemplate>
          <asp:Image ID="Image1" runat="server" />
        </ItemTemplate>
      </asp:TemplateField>
    </Columns>
  </asp:GridView>
  <div id="dialog" style="display: none">
  </div>
  <br />
  <br />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/start/jquery-ui.css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery- 
       ui.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        height: 600,
        width: 600,
        title: "Zoomed Image"
      });
      $("[id*=gvImages] img").click(function() {
        $('#dialog').html('');
        $('#dialog').append($(this).clone());
        $('#dialog').dialog('open');
      });
    });
  </script>
</asp:Content>

Insert code

protected void UploadButton_Click(object sender, EventArgs e)
    {

        FileInfo fi = new FileInfo(FileUploadControl.FileName);
        byte[] documentContent = FileUploadControl.FileBytes;

        string name = fi.Name;

        if (FileUploadControl.HasFile)
        {
            try
            {
                if (FileUploadControl.PostedFile.ContentType == "image/jpeg")
                {
                    if (FileUploadControl.PostedFile.ContentLength < 102400)
                    {

                        StatusLabel.Text = "Upload status: File uploaded!";

                        using (SqlConnection sqlcon = new SqlConnection(con))
                        {

                            sqlcon.Open();
                            SqlCommand cmd = sqlcon.CreateCommand();
                            cmd.CommandType = CommandType.Text;
                            cmd.CommandText = "INSERT INTO BluePrints (ID_Dev, PlotID, FileName, Content) VALUES  (' " + DropDownList1.SelectedValue + " ', '" + DropDownList2.SelectedValue + "', '" + name + "', '" + documentContent + "')";

                            cmd.ExecuteNonQuery();
                        }
                    }

                    else
                        StatusLabel.Text = "Upload status: The file has to be less than 100 kb!";
                }
                else
                    StatusLabel.Text = "Upload status: Only JPEG files are accepted!";

            }
            catch (Exception ex)
            {
                StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
            }

        }

''data:image/jpg;base64,U3lzdGVtLkJ5dGVbXQ=='' cannot be displayed, because it contains errors. — Watsyyy, May 06 '19 at 12:40
When I load the page, there is a small image icon, when i right click and view in another tab I receive that on a black background. — Watsyyy, May 06 '19 at 12:41
Try using the correct content type: `image/jpeg`. See for instance [here](https://stackoverflow.com/a/37266399/1429080)... — user1429080, May 06 '19 at 13:07
just tried that, getting the same error but just jpeg instead of jpg — Watsyyy, May 06 '19 at 13:19
Problem is that `U3lzdGVtLkJ5dGVbXQ==` decoded is `System.Byte[]` rather than anything that should be an image. In other words, your code is fine, your data in the database is invalid. It should be actual byte array rather than a string that says it's a byte array. — Wiktor Zychla, May 06 '19 at 13:25

score 1 · Answer 1 · answered May 06 '19 at 13:27

1

Problem is that U3lzdGVtLkJ5dGVbXQ== decoded is System.Byte[] rather than anything that should be an image.

In other words, your code that displays the data is possibly fine. Instead, your data in the database is invalid. It should be actual byte array rather than a string that says it's a byte array.

answered May 06 '19 at 13:27

Wiktor Zychla

47,367
6
74
106

I added the insert code, could you have a look at it for me please – Watsyyy May 06 '19 at 13:32
The code is incorrect and insecure. You should always use [parametrized queries](https://stackoverflow.com/questions/332365/how-does-the-sql-injection-from-the-bobby-tables-xkcd-comic-work). The `byte[]` parameter should be added like [this](https://stackoverflow.com/questions/4057748/save-byte-into-a-sql-server-database-from-c-sharp). – Wiktor Zychla May 06 '19 at 13:43

Getting error retrieving sql image from c# application

1 Answers1