2

I'm trying to put an image in Adaptive Card in Bot framework like this way:

card.Body.Add(new AdaptiveImage()
{
    Type = "Image",
    Url = new Uri(pictureUrl),
    Size = AdaptiveImageSize.Large
});

It's working. The problem is with Url. I get images from the external web service in Base64 format. But sometimes I get too large image so I get The uri string is too long exception.

Is there any way how to handle that problem? For example, enable putting the image in Adaptive card in bytes.

Miroslav Novák
  • 37
  • 6
  • What size is your file? i.e. pixel size? – Skin Apr 14 '19 at 02:13
  • Unfortunately, it's kind of big - 1920x1080. But I can't influence how big image would be because its from external service. – Miroslav Novák Apr 14 '19 at 08:48
  • That may be the case but it may be worth injecting some logic to resize the image before writing it to the card. This may help ... https://stackoverflow.com/questions/1922040/how-to-resize-an-image-c-sharp – Skin Apr 14 '19 at 09:30
  • Thanks. I've solved issue via resizing. However, I don't think that its best approach because I need resize a lot of images with every request. – Miroslav Novák Apr 14 '19 at 12:37
  • no, you’re right but it sounds like you’re a bit hamstrung if 1) you have to use those images from that service and 2) you have no control over that service. – Skin Apr 14 '19 at 20:39
  • Funnily enough Miroslav, I've just encountered this same issue but with local animated gif's that I am wanting to inject into my card. Resizing isn't really an option for me. ha ha! Bugger! – Skin Apr 17 '19 at 07:06
  • I'm currently satisfied with resizing. But if you find a better solution, let me know! – Miroslav Novák Apr 18 '19 at 10:29
  • yeah, I will. I actually raised an issue on the github repository. We’ll see what comes of that. – Skin Apr 18 '19 at 10:30
  • the Git issue approach yielded the below answer from Andrew. Nice result! https://github.com/microsoft/AdaptiveCards/issues/2716#issuecomment-491105356 – Skin May 10 '19 at 23:01

1 Answers1

4

thanks for reporting this issue. The root cause is that the pictureUrl is longer than .NET's max Uri length. We're tracking fixing this here.

There's a pretty simple workaround available, since the limitation is occurring in the .NET C# library which you're using to simply author the card, but WebChat doesn't use the C# library to display cards (it uses the JS library, and JS/HTML doesn't have a length limit!). Therefore, the only thing that isn't working in your case is generating the JSON... but there's a simple fix!

Workaround: Define the following class, extending AdaptiveImage, adding a LongUrl property (which writes to the same url property in the JSON).

public class AdaptiveImageWithLongUrl : AdaptiveImage
{
    [JsonProperty(PropertyName = "url", Required = Required.Always)]
    public string LongUrl { get; set; }
}

Then, use your new image class and the new property when assigning long urls!

// A data URL that's longer than .NET max length
string actualUrl = "data:image/gif;base64," + string.Join("", new int[120000].Select(i => "A")) + "end";

AdaptiveCard card = new AdaptiveCard("1.0")
{
    Body =
    {
        new AdaptiveImageWithLongUrl()
        {
            LongUrl = actualUrl
        }
    }
};

// Place the JObject in the attachment!
var attachment = new Attachment()
{
    Content = card,
    ContentType = "application/vnd.microsoft.card.adaptive",
    Name = "cardName"
};
Andrew Leader
  • 975
  • 6
  • 13