Reference a displayed image in README.md

Question

I have an image in markdown:

![Tabs](https://raw.github.com/dbpedia/DBpedia-Spotlight-Dashboard/main/images/doc/1_tabs.png)

How can I reference that image like:

[Figure 2](-reference-) shows the 4 main tabs of the dashboard

Hope you can help me. Thanks in advance.

This question does not help you? https://stackoverflow.com/questions/14494747/how-to-add-images-to-readme-md-on-github — Gonzalo Odiard, Aug 27 '21 at 21:20

score 2 · Accepted Answer · answered Aug 26 '21 at 18:20

With Github markdown, you can use HTML tag a, set with the name on the object and href

On the object/image:

<a name="tabs">![Tabs](https://raw.github.com/dbpedia/DBpedia-Spotlight-Dashboard/main/images/doc/1_tabs.png)</a>

On the link text:

<a href="#tabs">Figure 2</a>

You may need to define unique name for every components and also unique among the headings.

score 0 · Answer 2 · answered Aug 21 '21 at 16:56

You might be able to use html to create an anchor: see

https://stackoverflow.com/a/62058879/341994

But I doubt that this will work, because GitHub sanitizes your html and will probable neutralize the anchor. In that case, the answer is that what you're trying to do is impossible using the tool you're using.

Personally, I use kramdown to generate raw html from Markdown. That way, I can do the sort of thing you're after.

Reference a displayed image in README.md

2 Answers2