CODEWITHSUNDEEP
c#asp.net-mvc
m5kev4n
m5kev4n

Reputation: 571

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>

Upvotes: 0

Views: 539

Answers (1)

Hesam Faridmehr
Hesam Faridmehr

Reputation: 1196

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

Upvotes: 2

Related Questions