Image attachments from bots/webhooks render squashed vertically

[bl4ckswordsman]

Describe the bug

Images sent by bots or webhooks via HTML-formatted messages (e.g. <img src="mxc://..." width="200">) render squashed/compressed to a very small height in Sable, while the same message renders correctly in upstream Cinny.

Reproduction

1. Have a bot send an HTML message with an <img> tag pointing to an MXC URI, e.g.:
   <img src="mxc://your.homeserver/xyz" width="200" alt="image">
2. Observe the image in Sable - it appears squashed vertically into a thin strip.
3. Open the same room in Cinny - the image renders at the correct dimensions.

Expected behavior

The image should render at the correct aspect ratio, respecting the width attribute or the image's natural dimensions.

Platform and versions

1. OS: Linux
2. Browser: Vivaldi 7.9.3970.60 (Chromium 146.0.7680.218)
3. Sable version: 1.15.3-dev (6f98bd7)
4. Matrix homeserver: self-hosted

Additional context

Even some html formatting like font color (working in Cinny and Element Web) doesn't render in Sable.

[bl4ckswordsman]

The issue seems to be related to this line:

Sable/src/app/plugins/react-custom-html-parser.tsx

Line 918 in c2bb683

height={normalizeIncomingImgHeight(props.height)}

In my tests, removing it fixes the issue.

[7w1]

Have a bot send an HTML message with an <img> tag pointing to an MXC URI

If a bot wants to send an image, it should do so via an “m.image” message type not an inline image.

However Sable does have an option to set the max height under Appearance > Incoming inline images max height which can be set arbitrarily high to mimic the behavior of Cinny and Element web which should mitigate the issue.

As for the aspect ratio, yes as you said this is a bug that needs to be fixed.

Even some html formatting like font color (working in Cinny and Element Web) doesn't render in Sable.

You should be using <span>s with the data-mx-color attribute for color. We intentionally do not render <font> tags, as is recommended by Matrix spec.

[bl4ckswordsman]

Thanks for the reply and for the tips.

Setting the Incoming inline images max height to a high value didn't fix it for me as the images being sent with my bot have only a width attribute (so that they can maintain aspect ratio since the ratio differs from image to image).
The Incoming inline images default height setting seems to cause this, as there seems to be no way of disabling such default height.

Perhaps a solution could be that if Incoming inline images default height is set to 0, then it doesn't apply a default height or something, to preserve aspect ratio?

[7w1]

Ah I see, yeah i’ll look into a way to improve that behavior.