QnA Maker images are not loaded in MS Teams correctly

[Vigneshramkumar]

Tool

Name: QnAMaker, MS Teams Version: latest OS:

Describe the bug

QnA Maker images are not getting loaded properly in MS Teams. Tried with both Inline markdown image and adding through HTML tag.

To Reproduce

Steps to reproduce the behavior:

1. Train QnA Maker KB with QnA pair which contains images. Train two pairs one with inline markdown present in QnA Maker and other with HTML tag
2. Test both the response through bots in MS Teams

Expected behavior

Image has to rendered properly in MS Teams

Screenshots

Reply using Inline markdown.

Reply with tag

Additional context

I checked the issue https://github.com/microsoft/botbuilder-tools/issues/1409 and tried using tag with width and height, but that is also not working. Kindly help me to solve the issue.

[bug]

[v-kydela]

Thanks for the report, @Vigneshramkumar. I have a few questions.

1. Are you saying Markdown is rendering the image correctly while HTML isn't, or are you saying you're unsatisfied with the way the image in rendered using Markdown?
2. Can you show us a sample of the Markdown and the HTML you're using?
3. What happens when you send these messages to Teams without calling QnAMaker?

[Vigneshramkumar]

@v-kydela : Thanks for the quick response. PFB the response.

Are you saying Markdown is rendering the image correctly while HTML isn't, or are you saying you're unsatisfied with the way the image in rendered using Markdown?

Yes, Markdown is rendering the image but the size taken in Teams for showing that image is huge. You can see in the top that dog image is rendered through Markdown but there are many blank space in the bottom. Also i saw in issue #1409 that img HTML tag solves size issue but that was also not working.

Can you show us a sample of the Markdown and the HTML you're using?

Markdown Training:

Testing\n\n![Test](https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028__340.jpg)

Testing\n\n

HTML img tag:

<img src="https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028__340.jpg" alt="Open chat button" width="20" height="20">

What happens when you send these messages to Teams without calling QnAMaker?

I tried providing the response from QnA Maker as a Markdown string to Teams without calling QnA Maker, at that time also the image size is not getting rendered properly. But in Web chat it is working fine.

Kindly help us with a way to render the image properly in MS Teams. Thanks in advance for your response.

[Vigneshramkumar]

Markdown tag

Testing\n\n![Test](https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028__340.jpg)

HTML Img tag:

<img src="https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028__340.jpg" alt="Open chat button" width="20" height="20">

[v-kydela]

All right, here's what I think is going on. Some text editors only support plain text (like Notepad) while others support rich text or hypertext. Also, some text editors that support rich text or hypertext will automatically recognize web addresses and convert them to hyperlinks. When copying text to the clipboard, you sometimes copy more than just the raw text and so any special markup will end up getting pasted into other text editors (like the editor in the QnA Maker portal).

This can be hard to notice in the case of links, because the QnA portal will itself automatically detect links and display them as hyperlinks even when the raw text doesn't contain any markup. To fix your problem, you will have to make sure you enter just plain text with no markup into the answer field. If you're copying and pasting the text, then you'll have to copy from a source with no markup or you'll have to "paste as plain text" which can be done with Ctrl+shift+V on Windows.

QnA Maker seems to have some builtin Markdown support. When editing an answer in the QnA Maker portal there's a button called "Toggle Markdown view." You can press this button or Ctrl+M to see the Markdown that represents the answer behind the scenes.

Once you're in Markdown view, you can see something like this: <img src="[https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028__340.jpg](https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028__340.jpg)" alt="Open chat button" width="511" height="340">

However, that Markdown apparently doesn't necessarily represent the actual text that will get returned by your knowledge base, so you can't use this Markdown view to ensure that the answer contains no Markdown. You have to make sure you enter your HTML as plain text in normal view. To ensure that you've done this correctly, you can click "Inspect" in the test panel. When formatted correctly it will look like this:

When formatted incorrectly, it looks like this:

Does this resolve your issue?

[v-kydela]

@Vigneshramkumar - Are you still working on this?

[Vigneshramkumar]

@v-kydela - Sorry for the late reply. I tried with the above mentioned steps. But the format got changed automatically once we save the qna maker by clicking on save and train button. Before clicking button: After clicking save:

The img tag got automatically changed on saving action.

[v-kydela]

@Vigneshramkumar - In the screenshots, it looks like you're in Markdown view. Is that correct? And did you paste the HTML while in Markdown view?

[v-kydela]

@Vigneshramkumar - Are you still working on this?

[Vigneshramkumar]

@v-kydela - Thanks. I disabled the rich editor and tried loading the image with HTML img tag. It is working for some images and not working for some other images. I can understand the mistake is from image side, could you please let me know the maximum image size and dimensions (width*height) that are allowed in qna maker and also let me know is there any specific image type is there (like png, jpg etc..). Thanks in advance for your response.

[v-kydela]

@Vigneshramkumar - I need you to understand that QnA Maker just manages your knowledge base and has nothing to do with rendering images, so it doesn't make sense to ask what the image limitations are in QnA Maker. You will have a lot more success if you take QnA Maker out of the equation when troubleshooting your problems. Try testing your images by sending them to Teams directly to make sure they work. I don't see any limit in Teams for image dimensions so maybe something else is going on: https://docs.microsoft.com/en-us/microsoftteams/limits-specifications-teams

[v-kydela]

@Vigneshramkumar - Do you still need help?

[HansBrender]

Need Help from Teams Development Team

So this Procedure above is no longer available (it will not wpork). And I say, this is a rendering issue. I do not believe, that's a QnA issue, its an issue from Teams.

What I have done:

• Making 2 pictures: 1st 800x800px 2nd 800x400 Pix
• Establish 2 questions with Text-Picture-Text

1. Testing in the QnA Maker environment is ok!!
2. Publishing
3. Call both question in my BOT (running in Teams). (The BOT is available in the App Store (Community Bot for OneDrive)

1st Windows Desktop: You see the Space between the Blue Picture and the Text "following Text" == The Blue Picture is not square

2nd Teams running in a Browser: You see the same issue

3rd Teams running mobile (ioS): The mobile developers do it correct**

Summary:

Again, I cannot change anything in QnA Maker, and 99% of my pictures are not having the same px for height and width. I need help, but do not know the right people of Teams Desktop / Teams Browser in Bellevue. And the Developer Teams of the mobile version has done it right.