Images not showing on Github in Readme.md file

Question

Every time I drag and drop images into the Issue page of the project on Github and then copy the link to the Readme.md file. This usually works but if I have some more complex tags then images won't display, instead the link will be displayed.

This is how it looks like in the Markdown Editor:


And this is how it looks like on Github(live):

Note that the MarkDown editor displays the images as expected:

Answer 1

You're trying to nest Markdown inside block-level HTML (specifically <details>¹). In the original implementation, this doesn't work by design:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

If you are using an implementation that respects this decision, you should be able to use HTML syntax:

<details>
  <summary>Some summary</summary>
  <img alt="Description" src="https://user-images.githubusercontent.com/foo/bar/baz.png">
</details>

However, newer specs (most notably GitHub Flavored Markdown and CommonMark) do allow Markdown in block-level elements as long as they are separated by whitespace.

If you are using a modern implementation, try this:

<details>
  <summary>Some summary</summary>

  ![Description](https://user-images.githubusercontent.com/foo/bar/baz.png)

</details>

---

¹Note that

"block-level" is not technically defined for elements that are new in HTML5