CODEWITHSUNDEEP
imageasp.net-corerazor
CJH
CJH

Reputation: 1584

Razor pages .Net core displaying a base64 image from Page Model

I am new to .Net Core and Razor pages and have hit a bit of a problem. I am sure this is pretty simple but haven't been able to get the wright answer yet. I have images stored in my database (base64 encoded):

enter image description here

I am in the Code behind IndexModel:

enter image description here

Within this class I have implemented this bound model:

enter image description here

And am attempting to pass the Base64 image string to the Page:

enter image description here

And initially attempted to display the image:

enter image description here

However, everyone would probably already know that this doesn't work. Im guessing the model I am passing is only accessible though certainly htm helper tags and an img src isn't one of them.

Is there a more standard way of getting the result I am after using this model or any other means? I have taken a look at ViewBag but couldn't get this to work either. If anyone is able to offer an example I would be forever grateful!

Upvotes: 3

Views: 2693

Answers (2)

Dalton
Dalton

Reputation: 447

So summary what worked for you:

Controller:

[ViewData]
public string ImageString { get; set; }

public async Task LoadAsync(IdentityUser user)
{
    var appUser = await _userManager.Users.Include(x => x.ApplicationUserImage).SingleAsync();
    Username = appUser.UserName;

    string imageBase64Data = Convert.ToBase64String(appUser.ApplicationUserImage.ImageData);
    string imageData = string.Format("data:image/jpg;base64, {0}", imageBase64Data);

    this.ImageString = imageData;
}

View:

<div class="form-group">
    <img id="UserImage" src="@Model.ImageString" alt="your image" />
</div>

Upvotes: 1

CJH
CJH

Reputation: 1584

I have managed to achieve what I want after using ViewData:

[![enter image description here][1]][1]

[![enter image description here][2]][2]

and displayed using:

[![enter image description here][3]][3]

I would still be interested to hear other peoples thoughts on this answer and if there is a better 'best practice' I am missing?

Thanks [1]: https://i.sstatic.net/DgbOm.png [2]: https://i.sstatic.net/0SUVQ.png [3]: https://i.sstatic.net/aUcoX.png

Upvotes: 1

Related Questions