RocketChat / RocketChat/Rocket.Chat

Attachment image not clickable

Open Beginner friendly
#42,164 0 comments 0 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:

Images sent as attachment using image_url are not clickable

Steps to reproduce:
  1. Sent message with attachment
  2. Add image_url in the attachment
  3. Check the image
  4. Mouse will suggest link on hover
  5. Click is not implemented
Expected behavior:

When i click an image it will expand

Actual behavior:

Nothing happens

Additional context

When compared to link-preview we can see that the image attachment has a different class and attributes..
Adjusting this to the same as in link-preview the click and expand will work.

e.g.
original where click and expand is not working

<img class="gallery-item" data-src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQ6uESwmWmLq7bJbrbhquA7su_ZCMphg0aZhxvfylOdQ&amp;s" alt="" width="360" height="360" loading="lazy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQ6uESwmWmLq7bJbrbhquA7su_ZCMphg0aZhxvfylOdQ&amp;s">

adjusted the class to be generic-preview and renamed data-src to data-id which enables click and expand

<img alt="" width="360" height="360" loading="lazy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQ6uESwmWmLq7bJbrbhquA7su_ZCMphg0aZhxvfylOdQ&amp;s" class="rcx-message-generic-preview__image preview-image" data-id="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQ6uESwmWmLq7bJbrbhquA7su_ZCMphg0aZhxvfylOdQ&amp;s">

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

Search the frontend for the attachment image markup using gallery-item, image_url, and rcx-message-generic-preview__image, then compare it with the link-preview rendering. Reproduce the issue with an image attachment and verify that clicking the image opens the expanded preview without affecting other attachment behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.