时间戳

首页 > 解决方案 > Retrieve image from database and set it to background-image property css in asp.net mvc5

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

问题描述

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>

标签： c#asp.net-mvc

解决方案

您可以创建一个返回图像缓冲区的操作，例如：

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

并将动作地址放在 img 标签的 src 属性中

推荐阅读