locked
Background image from DB RRS feed

  • Question

  • User-34201054 posted

    Hello,

    I'm trying to give my div a background image from database, but it doesn't work.

    <div id="imagediv" class="centered_div" style="background-image: url('<%# "GetImage.aspx?id=" + Eval("value.ID") %>');" >

    controls

    </div>

    Please help.

    Thanks.

    Saturday, August 18, 2012 8:37 AM

Answers

  • User-1828494216 posted

    Generic HttpHandler in root directory

    public class GetImage : IHttpHandler
    {
        private static Random randonGen = new Random();
    
        public void ProcessRequest(HttpContext context)
        {
            Bitmap myBitmap = new Bitmap(100, 100);
            Graphics g = Graphics.FromImage(myBitmap);
    
            if (context.Request.QueryString["color"] == null)
                g.Clear(CreateRandomColor());
            else
                g.Clear(Color.FromName(context.Request.QueryString["color"].ToString()));
    
            MemoryStream ms = new MemoryStream();
            myBitmap.Save(ms, ImageFormat.Jpeg);
            byte[] bmpBytes = ms.GetBuffer();
            context.Response.ContentType = "image/jpeg";
            context.Response.BinaryWrite(bmpBytes);
            myBitmap.Dispose();
            ms.Close();
            context.Response.End();
        }
    
        private static Color CreateRandomColor()
        {
                
            Color randomColor = Color.FromArgb(randonGen.Next(255), randonGen.Next(255), randonGen.Next(255));
    
            return randomColor;
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    

    Default.aspx

    <asp:FormView ID="FormView1" runat="server">
        <ItemTemplate>
            <div style="width:100px; height:100px; background-image:url('<%# "../GetImage.ashx?color=" + Eval("Color") %>');"></div>
        </ItemTemplate>
    </asp:FormView>

    Code behind

    public partial class _Default : Page
    {
    
        public class DBValue
        {
            public string Color { get; set; }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            FormView1.DataSource = new List<DBValue> { new DBValue { Color="Red" } };
            FormView1.DataBind();
        }
    }
    

    Output

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 18, 2012 3:05 PM

All replies

  • User-1828494216 posted

    Please take a look at my blog post (Saving Images to SQL Server as Image Type with GridView) where you will see how to get the image from the DB and use HttpHandler to serve it to the user.

    Saturday, August 18, 2012 12:28 PM
  • User-34201054 posted

    That's not what I meant.

    I know how to retrieve images from DB and show them on a web page.

    I''m having a problem with doing the same thing as div's background picture.

    Saturday, August 18, 2012 2:31 PM
  • User-1828494216 posted

    Generic HttpHandler in root directory

    public class GetImage : IHttpHandler
    {
        private static Random randonGen = new Random();
    
        public void ProcessRequest(HttpContext context)
        {
            Bitmap myBitmap = new Bitmap(100, 100);
            Graphics g = Graphics.FromImage(myBitmap);
    
            if (context.Request.QueryString["color"] == null)
                g.Clear(CreateRandomColor());
            else
                g.Clear(Color.FromName(context.Request.QueryString["color"].ToString()));
    
            MemoryStream ms = new MemoryStream();
            myBitmap.Save(ms, ImageFormat.Jpeg);
            byte[] bmpBytes = ms.GetBuffer();
            context.Response.ContentType = "image/jpeg";
            context.Response.BinaryWrite(bmpBytes);
            myBitmap.Dispose();
            ms.Close();
            context.Response.End();
        }
    
        private static Color CreateRandomColor()
        {
                
            Color randomColor = Color.FromArgb(randonGen.Next(255), randonGen.Next(255), randonGen.Next(255));
    
            return randomColor;
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    

    Default.aspx

    <asp:FormView ID="FormView1" runat="server">
        <ItemTemplate>
            <div style="width:100px; height:100px; background-image:url('<%# "../GetImage.ashx?color=" + Eval("Color") %>');"></div>
        </ItemTemplate>
    </asp:FormView>

    Code behind

    public partial class _Default : Page
    {
    
        public class DBValue
        {
            public string Color { get; set; }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            FormView1.DataSource = new List<DBValue> { new DBValue { Color="Red" } };
            FormView1.DataBind();
        }
    }
    

    Output

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 18, 2012 3:05 PM
  • User-34201054 posted

    Thanks. I was missing the FormView enclosing.
    How can I make the div's height and width change according to the size of the image?

    Sunday, August 19, 2012 2:41 AM
  • User-34201054 posted

    Thanks. I was missing the FormView enclosing.
    How can I make the div's height and width change according to the size of the image?

    Sunday, August 19, 2012 2:45 AM
  • User-1828494216 posted

    You can not. Background image is depending on element size. If you want the element to depend on the image size than you will have to use image inside that element or some javascripting or create more methods in HttpHandler so they return the size and width of the image.

    Sunday, August 19, 2012 8:12 AM