I store images in the database and can retrieve them in a view thanks to a Get Method from my Img Controller that returns a File([] fileContents, string contentType).
No problem to display it in a View with :
<img src="@Url.Action("Get", "Img", new { id = Model.ImgId})"
On the contrary, when I try to pass the URL of an image within an inline background-image: url, it does not work.
1) I tried this in the View using the same Img Controller to get the image :
<div style="background-image: url('@Url.Action("Get", "Img", new { id = Model.ImgId})')"></div>
Which renders this HTML but does not display the image :
<div class="imageBox" style="background-image: url('/Img/Get/2')"></div>
2) I tried this in the User Controller :
string formatWithoutPoint = user.Img.Format.Substring(1);
string imageBase64Data = Convert.ToBase64String(user.Img.Data);
string imageDataURL = string.Format("data:image/" + formatWithoutPoint + ";base64,{0}", imageBase64Data);
ViewBag.ImgSrc = imageDataURL;
And this in the View :
<div class="img" style="background-image: url('@ViewBag.ImgSrc')"></div>
which renders this HTML but does not display the image :
<div style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAU...')"></div>
I don't understand... have you any idea?
I know someone had the same problem but he did not share how he finally managed to solve it : ASP MVC: Upload Image from Database as Full Background CSS
Thanks in advance
