RocketChat / RocketChat/Rocket.Chat

Mobile image caption (alt text) not displayed on desktop/web clients

Open
#40,730 9 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

When a user sends an image with a caption from the mobile app,
the caption text is not visible on desktop clients (Windows/Linux/Web).

Steps to reproduce:
  1. Open Rocket.Chat on mobile
  2. Send an image with a text caption
  3. Open the same channel on desktop app or web browser
  4. The caption text is missing
Expected behavior:

Caption text should be visible below or above the image.

Actual behavior:

Caption text is only stored in the alt attribute of the <img> tag
and is not rendered as visible text on desktop.

Root Cause (HTML analysis)

Mobile message — text only in alt, no rcx-message-body block:

Аватар Mobile User IMG_6827.jpg (48.76 kB) Caption text sent from mobile device

Desktop message — text in separate rcx-message-body block, alt is empty:

Аватар Desktop User Text sent from desktop as separate message body Clipboard - screenshot.png (21.94 kB)
Server Setup Information:
  • Version of Rocket.Chat Server: 8.4.0
  • License Type: Starter
  • Number of Users: 41
  • Operating System: Rocky Linux 9.7
  • Deployment Method: docker
  • Number of Running Instances: 1
  • DB Replicaset Oplog: Not configured
  • NodeJS Version: v22.16.0
  • MongoDB Version: 8.0.21 / wiredTiger
Client Setup Information
  • Desktop App or Browser Version:
  • Operating System: Ubuntu 24 - 4.14.1, Windows 11 - 4.14.0, IOS 26.5 - 4.72.0.108804, Android 15 - 4.72.0.108809
Additional context
Relevant logs:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the mobile image-caption case in the desktop or web client and trace the message rendering path for uploaded images. Compare the mobile-generated markup, where the caption is only in img alt, with the desktop markup, and verify that the caption becomes visible text without losing image accessibility.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.