Images are not included inside exported messages history and has to be viewed separately

[Jakolineuser]

Steps to reproduce

1- Open any chat room in Element web
2- Click room info located at the top right corner of your screen
3- Click export chat
4- Choose format as HTML (from the beginning) then tick the "Include attachments" checkbox
5- The result is an archive that has many files one of them is called "messages.html"
6- Clicking this file will launch it in your browser, it has the full history of the chat room with videos included, but not images
7- If the user wanna see the images then he/she should open the images folder and watch every image separately
8- This move destroyed the context of the chat room
9- Why is there "messages.html" and "messages2.html"? Why not make the entire history in one file?

Outcome

I expected to have the full room history exported and available for viewing in one html file with both images and videos included into that single file, so that I can open it in my browser and watch the whole history, what I got instead was an export distributed into two html files without any images, the images was available but standalone in a separate folder which ruined the context of the chat room.

Operating system

Debian

Browser information

Tested in both Firefox 91.6.0esr (64-bit) and Google Chrome 98.0.4758.80 (64-bit)

URL for webapp

https://app.element.io/

Application version

Element version: 1.10.11

Homeserver

matrix.org

Will you send logs?

No

[Jakolineuser]

Judging by the similarity, perhaps the code responsible for exporting room history was taken from the Telegram desktop client, which is open-source, please notice that in Telegram Desktop 3.7.3 the export function is working as expected, with both videos and images being visible and clickable in a single "messages.html" file.

[t3chguy]

Yes, it was a community contribution based on that, the contributor is no longer around

[Jakolineuser]

Well, I'm not a programmer, someone should observe the source code for the latest version of Telegram desktop client and try to mimic that, because it's not very useful in it's current state, this is important.

The export function is full of problems, someone should fix them, write something new, or mimic the latest Telegram code.

[eTomte]

I'm having this issue as well. At the bare minimum the image issue needs to get fixed. I also dislike how there isn't a single HTML file with all of the messages, but the export has been that way since the beginning (when images worked.)

[bw4518]

I confirm this issue. Export as such is almost completely useless. As stated, exported video files don't have this problem.

[dividuum]

Can confirm the missing images. I took a quick look at the code base after comparing the HTML output from the export with the one in element-web. The HTML export looks like this:

<div style='max-height:243px;max-width:324px;''></div>
<div style='height:243px;width:324px;''></div>

when it should look similar to the output in element-web:

<div style='max-height:243px;max-width:324px;''></div>
   <img ...>
</div>

I (think I) tracked this down to this code. My guess would be this.state.imgLoaded is still false while exporting in line 497:

  { !this.state.imgLoaded && <div style={{ height: maxHeight, width: maxWidth }} /> }

Might make sense as the export maybe doesn't wait for those images to be loaded? There seems to be a forExport prop that might be used force the image to be embedded as is without waiting for it to be loaded? Might have been introduced by this commit? I might be totally wrong with all of that as I'm neither familiar with matrix nor this code base.

[Jakolineuser]

It's been 4 months, has anyone taken tangible steps to fix this?