githubmarkdowneditor

Images not showing on Github in Readme.md file


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: Markup


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

Note that the MarkDown editor displays the images as expected: displays them


Solution

  • 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