backstage: TechDocs Reader 404 when clicking link to relative image

Click on hyperlinks to a relative image files within the techdocs reader will result in a 404. When this is done in the raw MkDocs static site, the image is displayed full screen in the browser. However, the techdocs reader appends a /index.html to the end of the image file (which does not exist).

Expected Behavior

You can click a link that points to an image file and the image will be displayed in techdocs reader component within Backstage.

Current Behavior

Within Backstage, clicking on these links will cause a 404. The techdocs reader tries to fetch the file at https://docs-storage/.../some-image.png/index.html which doesn’t exist. The raw MkDocs site will open the image file in the browser full screen.

I suspect this could also be an issue for other types of asset files as well (e.g. PDF’s, SVG’s, etc.).

Possible Solution

I haven’t investigated beyond this so I’m not sure about what solutions are possible to fix this. We could embed the images into a markdown file to workaround this. However if the image is large it’s not always practical to view. Some sort of modal lightbox possibly with zooming and panning would probably be very helpful for these situations.

Steps to Reproduce

1. Create a simple markdown docs site with a random image + a single markdown file containing a link to the image. For example:

- [link to relative image](some-image.png)
- [another link to relative image](./some-image.png)

1. Run techdocs-cli serve
2. Click the link & inspect the network request.

Context

We use PlantUml a fair bit and sometimes the generated images are quite large to fit into a page. So viewing them full screen (not scaled) is sometimes needed.