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>

Answer 1

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