Displaying Base64 encoded images in .NET MAUI

This question comes up from time to time, so I decided to answer this once and for all in an easy to share form: a blogpost. Read all about how to encode and decode Base64 images for viewing in .NET MAUI.

Spoiler alert: this is not specific to .NET MAUI, you can also use this with Xamarin.Forms, or WinUI or WPF, or… Well, you get the idea!

The sample code for this post is on my GitHub account: https://github.com/jfversluis/MauiBase64ImageSample

What the Base64?! #

Base64 is a way to convert binary files, usually images, to text. That way you can easily store them in, for instance, a database.

For this blog post I will be using the “official” .NET MAUI logo, the ones that we find next to the templates in Visual Studio currently. You can see it down below for reference.

Decoding Base64 #

If you have been dealing with converting one object to another, you probably already know the static Convert class in .NET. We can also use that same class to convert binary files from and to Base64.

Let’s first have a look at decoding an image. In the sample repository that I created for this post you can find a big string hidden in the Base64ImageProvider.cs file. This is the Base64 encoded version of the image above.

To use this in a regular .NET MAUI Image element, you can do the following.

Sample code to demonstrate how to show a Base64 encoded image in .NET MAUI

Note how you would typically add the using keyword when using a Stream. In this case you don’t want to do that. Because that will close the Stream before the image gets loaded.

Encoding an Image as Base64 String #

Now, let’s see how to do it the other way around, take an image and encode it as a string.

As you might have guessed by now, there is also a Convert.ToBase64String() method. We’ll need convert our file to a byte array and then we can convert it. In .NET MAUI, you can load a file that you provide inside of your app as a resource (under the Resources\Raw folder in the project) with the FileSystem APIs.

From that we get a Stream, that we load into a MemoryStream and a MemoryStream can be converted into a byte[].

Sample code to demonstrate how to encode an image as Base64 string in .NET MAUI

Here I am using the using keywords so that the streams I have used are cleaned up after we’re done with them.

Of course there are other ways to get files, so you might have to do something different here instead of FileSystem.OpenAppPackageFileAsync, as long as you manage to convert your file to a byte array, you should be good.

Summary #

Now you know how to work with Base64 and .NET MAUI images! While this post starts with how this can be used to save image in databases, that is something I do not typically recommend.

Databases usually aren’t optimized to hold these amounts of (binary) data. Typically what you want to do is save the images somewhere on disk and then save the path to said image in the database. But who am I to tell you what to do? 😉

The code that I’ve use for this post is on this GitHub repository: https://github.com/jfversluis/MauiBase64ImageSample

Good luck!