I have a collection of base64Strings which need to be viewed as Images on a View.
Does anyone have an idea of how I can do this? I'm completely stumped.
Add a comment
|
2 Answers
You can do something like this (this is for one image, but you can easily extend it for a list of them).
(See the header infront of the base64 string "data:image/png;base64,")
//Model
public class ImgModel
{
public string Src { get; set; }
}
//Action
public ActionResult Index(int id = 0)
{
var img =@"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==";
return View(new ImgModel{Src = img});
}
//View
<div id="kk1">
<img id="myimg1" src="@Model.Src" alt="Red dot">
</div>
The sample img data I have used is from Wikipedia
2 Comments
Subby
Hi. I'm not sure what you mean by: var img =@"data:image/png;base64. I understand that after that there is a base64String but, the data:image.png etc doesn't make any sense to me.
prashanth
you can read more about data uri in the wikipedia link i mentioned; the format is defined as data:[<MIME-type>][;charset=<encoding>][;base64],<data>
ASP.NET MVC has pretty nice solution for these tasks. We will create an action, which will return a stream representing an image, in a form the Web browser knows. I am sorry for a large string containing base64 image, but that will assure that you can use it out of the box:
static string ImageSource = "iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAIAAADOjonJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACcklEQVR42pVUy05UQRSs07fvvc5lGEadIQgEDD6IEDUmosQYt8pC/R39Gvf+grhzTcJ+CD7CJMDwknnc269yMfIaRKV2nfSprlOnTksgrfORAggRBEIEAsFloJTSNvgPn3/cGUtnxrKrV3SSRBBeikhE0jTVNGplbWd51b58WFucrY5WklKiI+Eg1ekjz7AAIKlDxP3DotHs7Oz3vm91lh7VJ2vZcCnSkRzfGyg+DZJKKQBaAp31nXbe68inTtHcbL9evDE3XakOxUmshOGEa5Dj90MkAWiQsI7G5S60crPSNdt7vVePx57NX69X0yzVIuFiywgISZIaALynNXCwFvvGmtx8POhubLaXno5P1EvlUhzrC50m+26KJgBrYT18ABEEbWttbpY7prl5+Ob5xNz0SLUca61Ot0hC+nJEBBqgBgkfxDr4cGxpYWSnsKvdvN3ae7tQe3K7nGmofinIE+9FIhUqwzJU0QTgHKyBC6c1B9DlJm/3dje+bKV7WUyICHnGHoGoOJ2aHHn3XhOEc7TuiIgAEvoy8+mw88I3ptgqWATx54IlFEqUUEf9qQU6L9bCs686pa2iO++bi75RD+0UJiCYC7wWjcRZEhoEnIfzsF6RJRQ1HC749Tm/UUUvpg2A/VOEjoLtrPcENAXinRgXuyJjMcnWAtduht0hFIre/SXU/XUVGB9AahBiXGI7Jde+G5oP+LUWDhMxgSz+tWsCQKkskKRmYMZ8NBzcc41bbFaQx7CeCANCzsmSfmugA0hopTE7ntw/+FmzkrEWoT8d/ucXEiVJOj4hUSTG2r31b8V2C/C4HARgQDRUv1a5OfMLsQpx+LS8fvQAAAAASUVORK5CYII=";
public ActionResult Image()
{
var arr = Convert.FromBase64String(ImageSource);
return this.File(arr, "image/png", "image.png");
}
And then call it from your view
<img src="@Url.Action("Image")"/>
PS: Expecting you are on a Home controller
