Fetch picture from database and bind it to ListView

Question

I'm sorry for this question as I believe it probably is really basic, but I seem to have a lot of trouble with it.

What I'm trying to do is get the picture that I saved in the database and bind it to the ListView I have.

In the Database I don't have the picture itself, I have the name of the picture and so I want to try to fetch it using its PathWay.

I'm using ASP.NET Web Forms Web Site Here is the ListView so you could get a better understanding of what I mean

<asp:ListView runat="server" ID="lvBrands" OnItemDataBound="lvBrands_ItemDataBound">
                <LayoutTemplate>
                    <ul class="grid portfolio isotope no-transition portfolio-hex portfolio-shadows row demo-3 os-animation" data-os-animation="fadeInUp">
                        <li runat="server" id="itemPlaceholder"></li>
                    </ul>
                </LayoutTemplate>
                <ItemTemplate>
                    <li class="portfolio-item col-md-3 col-sm-3 style fashion grid cs-style-3">
                        <figure class="portfolio-figure">
                            <img src="images/products/test.jpg" alt="work-01" />
                            <figcaption>
                                <h4 class="title purpleColored" color="#58387B"><%# Eval("name") %></h4>
                                <span><%# Eval("keyword") %></span> <a class="text-right" href="javascript:;"><i class="fa fa-angle-right"></i></a>
                            </figcaption>
                        </figure>
                    </li>
                </ItemTemplate>
            </asp:ListView>

Instead of <img src=... /> i want the picture pathway to be attached so it can display the appropriate picture for the appropriate brand.

The Brands is a table I created in sql, basically the relation between Brands and Pictures is one-to-many (One Brand can have many pictures)

In what I've searched so far, I saw that it was better to use the OnItemDataBound to get the picture from the db, any further help would be much appreciated.

Here is the c# code for further help

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            DisplayBrands();
        }
    }
    protected void DisplayBrands()
    {
        using (Entities db = new Entities())
        {
            List<Brand> brand = db.Brands.ToList();
            lvBrands.DataSource = brand.OrderByDescending(b => b.date_created);
            lvBrands.DataBind();
        }
    }

}

I know for a fact I should specify the function lvBrands_ItemDataBound, but I honestly don't know what to add.

Any help would be amazing, Thank you!

Answer 1

<img src="images/products/test.jpg" alt="work-01" />

Change above like below

<img src='<%# @"images/products/" + Eval("Image_name") %>' alt="work-01" />

"Image_name" should be the name of the column, where you store the picture name.