从数据库中检索图像并将其设置为asp.net mvc5中的background-image属性css

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