Retrieve image from database and set it to background-image property css in asp.net mvc5

Question

I'm trying to figure out how I can set the picture that I uploaded to SQL Server, and set it to background-image style in div. I know that url function in css only accept the path to the image. Is there any workaround that can config for the property to accept the image file directly from database?

<div class="item-2">
    <a href="@Url.Action("Details", new { id = item.id })" class="card">
    @{ 
        var base64 = Convert.ToBase64String(item.img);
        var imgsrc = string.Format("data:image/jpg;base64,{0}", base64);

        <div class="thumb" style="background-image: url('@imgsrc');"></div>
        <article>
            <h1>@Html.DisplayFor(modelItem => item.name)</h1>
            <p>@Html.DisplayFor(modelItem => item.info)</p>
            <span>Major</span>
        </article>
    }
    </a>
</div>

Hesam Faridmehr · Accepted Answer · 2018-05-06 10:36:11Z

2

You can create an action that returns image buffer like:

return File(imageBuffer, "image/jpeg");

and put action address in src attribute of img tag

answered May 6, 2018 at 10:36

Hesam Faridmehr

1,20610 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

m5kev4n Over a year ago

But then how would i set it to css background-image property if i use img tag. i want to be able to set background image for a div

Collectives™ on Stack Overflow

Retrieve image from database and set it to background-image property css in asp.net mvc5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related