How can I display images on a web form page that are retrieved from a database in an ASP.NET and C# application?

Question

I am working on a resume generator project. It requires the user to fill out a form consisting of many personal information like name, email, personal photo, and so on. The info is stored in the database and has to be retrieved to generate the resume. However, I stored the user's photo as shown below: (Note: image is stored as varchar “only the path and the name”)

FileUpload1.SaveAs(Server.MapPath("Image/" +filename)); cmd.Parameters.AddWithValue("@ImagePath", "Image/" + filename);

How can an image be displayed on a web form page retrieved from the database?

Software: Visual Studio 2019 - Community version Languages: HTML5, CSS3 ASP.NET, and C# for the behind code.

I did not do anything. I am a nope in programming and I felt helpless.

Not sure where you are stuck, but follow this: 1. Define a folder where you are going to save all the images and save this base path in constants, so you don't have to repeat 2. Save image on server drive with custom name that is specific to the user to avoid overwrites 3. Save the image name in database 4. Read data from the database including the image name 5. Use the image name retrieved from DB to generate the full path and display it using an image element — Pirate, May 29 '23 at 21:17

score 0 · Answer 1 · answered May 29 '23 at 20:19

0

Maybe you can use a repeater to show your stored images.

Show images in Repeater control

For this you can use a SqlDataSource or DataTable in the code behind.

answered May 29 '23 at 20:19

Josue Barrios

440
5
10

score 0 · Answer 2 · answered May 30 '23 at 00:55

0

Since you already know the path of the image file, do the following:

<asp:Image ID="imgDisplay" runat="server" ImageUrl="~/Image/your_image.jpg" />

answered May 30 '23 at 00:55

Jamal

398
4
9

score 0 · Answer 3 · answered May 30 '23 at 04:17

Ok, so we want to display some information about a record, and one of the columns in that database has the picture we want to display.

So, say we want to display some information - say about a fighter.

So, say this simple markup:

    <div class="mybox" style="float:left">
        <div style="text-align: center; padding: 2px 10px 12px 10px">

            <h3 id="Fighter" runat="server"></h3>

            <asp:Image ID="Image2" runat="server" 
                Width="180" Height="120" />

            <h4>Engine</h4>
            <asp:Label ID="EngineLabel" runat="server" Text="" />

            <h4>Description</h4>
            <asp:Label ID="DescLabel" runat="server" width="400px"
                Text="" style="text-align:left" Font-Size="Large" />
        </div>
    </div>

And code behind is this:

    protected void Page_Load(object sender, EventArgs e)
    {
        // assume previous calling page
        // set PK ID in sesion

        if (!IsPostBack)
        {
            LoadInfo();
        }
    }

    void LoadInfo()
    {
        int PK = (int)Session["FighterID"];

        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL =
                "SELECT * FROM Fighters WHERE ID = @ID";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = PK;
                conn.Open();
                DataTable dtFigher= new DataTable();
                dtFigher.Load(cmdSQL.ExecuteReader());

                DataRow dr = dtFigher.Rows[0];

                Fighter.InnerText = dr["Fighter"].ToString();
                EngineLabel.Text = dr["Engine"].ToString();
                DescLabel.Text = dr["Description"].ToString();

                Image2.ImageUrl = dr["ImagePath"].ToString();
            }
                
        }
    }

And now we get/see this:

So, you are free to add a path name, and it depends on if you saved just the filename, or that you include the path name with the image.

However, the above should give you the basic idea here as to how you can pull a record, fill out some controls on the web page, including that of a image control.

How can I display images on a web form page that are retrieved from a database in an ASP.NET and C# application?

3 Answers3