ASP.NET Core API Controller: Response.Body.WriteAsync base64 string not working

Question

I'm trying to return a base64 string representing a jpeg image from an API Controller and set it as the src of an <img> but all my attempts failed.

Here is the very simple HTML:

<img src="/api/TestBase64Image" alt="image test" />

And my controller:

[Route("api/[controller]")]
public class TestBase64ImageController : Controller
{
    private const string _base64Image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/7Sfg.....";
    private const string _base64Image2 = "/9j/4AAQSkZJRgABAQEBLAEsAAD/7Sfg.....";

    [HttpGet]
    public async Task Get()
    {
        Response.ContentType = "image/jpeg";
        //Response.ContentType = "text/plain";
        //Response.ContentType = new MediaTypeHeaderValue("image/jpeg").ToString();
        //Response.ContentType = new MediaTypeHeaderValue("text/plain").ToString();

        //Response.Headers.Add("Content-Length", _base64Image.Length.ToString());
        //HttpContext.Response.ContentLength = _base64Image.Length;

        await Response.Body.WriteAsync(Encoding.UTF8.GetBytes(_base64Image), 0, _base64Image.Length);
        //await Response.Body.FlushAsync();
    }
}

I've tried several things, like removing FlushAsync(), changing the way to define the ContentType, include data:image/jpeg;base64, in the string or not but nothing is working.

I've seen here and here that writing in the Response body stream is doable, so I presume I'm on the good way (I've tried to return a simple string before but not working as well).

Yes my base64 string is correct because I've also tried to include it directly into the HTML and the image shows up correctly.

I precise I don't want to use any JavaScript or Razor view to achieve that, only pure HTML and my controller.

Also please pay attention that I'm inside an API Controller. I can't do the same as we see in the Configure method in the Startup class of an empty ASP.NET Core project like:

app.Run(async (context) =>
{
    await context.Response.WriteAsync("Hello World!");
});

Even though both Responses' types are HttpResponse, the one in my controller doesn't have any Response.WriteAsync but Response.Body.WriteAsync

Thanks for your help, it's been hours I'm searching but there is almost no resources about this yet for ASP.NET Core

Answer 1

You're still returning the data as base64 text, basically - you're getting the UTF-8 encoded form of it, but that's all.

If you really only have the base64 version of the image, you just need to decode that:

byte[] image = Convert.FromBase64String(_base64Image2);
await Response.Body.WriteAsync(image, 0, image.Length);

(Note that it needs to be just the base64 you convert - not the data URI.)