how to display an image to gridview using image path from stored procedure in a class library

Question

I want to store an image from a database to a gridview using a class library stored procedure. The image path is stored in the database is ~/App_LocalResources/Profile_BrgyCitizen/image.png

My database table is named "TblBrgyCitizen" and the name | data type for the image is ProfilePic | nvarchar(MAX)

Filename of stored procedure => GridviewBrgyCitizen

Stored Procedure SQL to display into gridview is

SELECT ProfilePic, FullName

Class Library code (see below)

public DataSet GridviewBrgyCitizen()
        {
            SqlDataAdapter da = new SqlDataAdapter("GridviewBrgyCitizen", myConn);
            da.SelectCommand.CommandType = CommandType.StoredProcedure;
            DataSet ds = new DataSet();
            da.Fill(ds);
            
            return ds;
        }

aspx file code for gridview

aspx.cs file for where the gridview resides

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

        DataAccess myData = new DataAccess();

        public void GETGridviewBrgyCitizen()
        {
            GridView1.DataSource = myData.GridviewBrgyCitizen();
            GridView1.DataBind();
        }


            
                
                    
                
                    
                    
                    
                
            
            
                
                    
    
        
            Profile Pic Full Name National ID Gender Civil Status Voter Status Contact No Action
        

            Jose Ang 111-1111-111 Male Single Yes 0999999999

Inspect Element:

Albert D. Kallal · Answer

what you have should work. Does the GV load, display other columns and data correctly??

And yes, since this is server side code, then the including the "~/ and your path name" is correct. Keep in mind that for markup, you can NOT use the "~", but you can and should use that format for server side code.

As a quick test?

Drag and drop the image from the solution explore into a blank clean area on the web page. It will and should spit out a image control for you.

so, for example, I have this:

So, lets double check the path name it will generate. But, remember, WHERE is your current page!!!!

My current page is Test5\fun.aspx

So, when I drag + drop in the image (just drag from project explore into the markup), you get this:

Note the path name it generated!!!

however, in my database, I do have this path name:

So, for a plain jane image image control?

You MUST remove the ~ in markup, (but keep the /).

But, for above, say grid view? Or any server side code?

then the "~" is fine.

So, lets send that data table to this grid:

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

    void LoadGrid()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL = @"SELECT ID, Animal, ImagePath, PictureName FROM tblAnimals";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }

And we now get this:

Also, NOTE VERY close, your size and width settings will not work.

You need to use this:

So, use ControlStyle-Width (and height if need be, but width usually does the job).

But, as noted, either your data is not being pulled, but if the other grid columns display, then you do have a path name error.

how to display an image to gridview using image path from stored procedure in a class library

1 Answers