Why photo is not displaying in ASP.NET web application

Question

I am making a web application using ASP.NET Forms in C# language.
and i need to take an image as an input and want to display it...
Here 'staffStatus' is ID of a GridView.. ( i don't want to bind data directly from there as only few columns should be displayed. )

SqlCommand cmd = new SqlCommand("SELECT * FROM [StaffInfo] WHERE Role='Staff' ", con);
                    SqlDataReader dr = cmd.ExecuteReader();
                    if ( dr.HasRows==true )
                    {
                        staffStatus.DataSource = dr;
                        staffStatus.DataBind();
                    }

This is content of staffStatus.aspx page ( to display the data )

<asp:GridView ID="staffStatus" runat="server" AutoGenerateColumns="False" ShowHeader="false" CssClass="table">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    Id: <asp:Label runat="server" id="staffId" Text='<%# Eval("Id") %>' />
                    <br />
                    Name : <asp:Label ID="staffName" runat="server" Text='<%# Eval("staffName") %>' /> <asp:Label runat="server" id="staffSurname" Text='<%# Eval("staffSurname") %>' />
                    <br />
                    Email : <asp:Label ID="staffEmail" runat="server" Text='<%# Eval("staffEmail") %>' />
                    <br />
                    Gender: <asp:Label runat="server" id="staffGender" Text='<%# Eval("staffGender") %>' />
                    <br />
                    Phone No. : <asp:Label ID="staffPhoneNo" runat="server" Text='<%# Eval("staffPhoneNo") %>' />
                    <br />
                    Joining Date: <asp:Label runat="server" id="staffJoinDate" Text='<%# Eval("staffJoinDate") %>' />
                    <br />
                    Role : <asp:Label ID="Role" runat="server" Text='<%# Eval("Role") %>' />
                    <br />
                    Image : <image src='<%# Eval("staffImage") %>' />
                    <br />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

And here is how, i save form data into Database

string staffImageName = ddlRole.SelectedItem.Text.ToUpper() + "_" + staffImage.PostedFile.FileName;
string staffImagePath = "Images/Staff/" + staffImageName;
staffImage.PostedFile.SaveAs(Server.MapPath("~/Images/Staff/") + staffImageName);
SqlCommand cmd = new SqlCommand("INSERT INTO [staffInfo] VALUES ('" + txtName.Text + "','" + txtSurname.Text + "','" + txtEmail.Text + "','" + ddlGender.SelectedItem.Text + "','" + txtPhone.Text + "','" + DateTime.Today.ToShortDateString() + "','" + cryptPassword + "','" + ddlRole.SelectedItem.Text + "','" + staffImagePath + "')", con);
int chck = cmd.ExecuteNonQuery();

So basically it'll save photos as STAFF_pic1.jpg or ADMIN_pic2.jpg in images folder available in project.
And for database it is storing data like Images/Staff/STAFF_pic1.jpg

BUT THAN HOW COME IT IS NOT DISPLAYING PICTURE ON APPLICATION!? Can anyone tell how and why this is happening!??

Answer 1

Well, what folder are you running the GridView from?

I mean you might have a folder called "accounts/MyAccounts.aspx"

So, if that web page is nested, then the path to pictures would be this

            <img src="../Content/ckdelete.png" />

However, if the web page is in the root of the web site, then we would use this:

             <img src="Content/ckdelete.png" />

So, the path name for the image will have to be changed depending on where the current web page is running from. But, say we moved/copied the code + web page to theat accounts folder? then you could do this:

Image : <image src='<%# "../" + Eval("staffImage") %>' />
<br />

Often, I am lazy to get the path name, so I open up that page with the gridview, an then from project explore simple drag + drop the image in from the given folder into a blank area on teh web page, and that will get me the correct path name. I copy it, and then delete the image from the page.

Now, of course that path name for the image MUST be a valid folder in the web paths available to you. If for security reasons you don't want a valid URL to exist for the image? (or PDF for whatever), then you could place such files/pictures OUTSIDE of the web folder hierarchy , and use code behind to read the picture and "stream" it to the gridview. but, at this point in time, we assume that the path name is a valid folder in the web site, and that such pictures can be displayed if you typed in the URL to that picture (try testing the URL by typing it into the browser - does the picture show????).

And test by as per above and dragged + dropped the picture file from the project explorer into a web page to see if it can display.

So, the picture source must be a valid folder path into your current web site folders. If not then you can use code behind to read such files off the disk drive, but that's a different question and different story and post!