How do i display images in Microsoft bot framework with only the base64 encoded string of the image?

Question

i tried the below code, and here is the output i get in emulator

message.Attachments.Add(new Attachment() { ContentUrl = $"data:image/jpeg;base64,xxxx" });

Answer 1

There appears to be a max size for data uri images, however your initial code looks good to me and isn't throwing an explicit internal server error (as it would if the datauri is too large).

I've implemented something similar:

var reply = message.CreateReply("Here's a **datauri image attachment**");
reply.Attachments = new List<Attachment> {
    new Attachment()
    {
        ContentUrl = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAQABADAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAACAUH/8QAJhAAAQMDAwQCAwAAAAAAAAAAAQIDBQQGEQcIEgATISIUMRUjUf/EABYBAQEBAAAAAAAAAAAAAAAAAAMBBP/EAB8RAAICAQQDAAAAAAAAAAAAAAECAAMRBBITIiFB8P/aAAwDAQACEQMRAD8AubjdVbtj5cQFi3tX2lS/ka16Rko9pZqHHfklplgKAylJPNR/vEZPWyvTpUN7jMyK3M21fE03ZLuQ1Gmbyc0j1Dudq7o8RztXFzXEGtacZeQhxipKT7D9qcKUOQ+skfRWKrdqxj71HI4erHME97633Fc+pF10c64pIg7ll6CldoEcHEoTVL7fMZ9se2CPOekdkCiSjIYmLvYvMRdLQPXDG3FGSEzK1iKB4rYCnaan7oVwcCQCHVqGTkkeEefGOgbTtjccyW6sM4QAT//Z",
        ContentType = "image/jpg",
        Name = "datauri"
    }
};

Which results in the emulator showing this image (I need more rep to embed images.. ugh..)

Update: a data uri version of a ~20kb image works just fine, however a data uri version of a ~140kb image fails with a "500 internalservererror" in the emulator. Guess there is a size limit after all..

As such, can you validate that he datauri you're using is a valid image? Can you create a simple html page with an img element, paste in the value in your ContentUrl and see the image in the html page? Or even just paste it into a browser address bar.

Answer 2

When you want to display images you can use markdowns.

var replyMessage = "[ImgName](" + ImagesUrl + ")";
return message.CreateReplyMessage(replyMessage);

Bot Framework Markdown Documentation

================= Convert Base64 string to Image ==========================

    public void SaveImage(string base64)
{
    using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(base64)))
    {
        using (Bitmap bm2 = new Bitmap(ms))
        {
            bm2.Save("SavingPath" + "ImageName.jpg");
        }
    }
}

Then you can use the URL.