Is it possible to add border to image in GitHub markdown?

HtmlGithubMarkdown

Html Problem Overview


I need to add border to the image in GitHub README.md file. This is how image should be embeded:

![GitHub Logo](/images/logo.png)

I have tried to wrap image with the table:

|--------------------------------|
|![GitHub Logo](/images/logo.png)|

but it is not possible to create table without header.

I have also tried to include image as html tag:

<img src="/images/logo.png" style="border: 1px solid black" />

but without success. Is there any way how to do this?

Html Solutions


Solution 1 - Html

It's hacky and not always pretty, but surround the image with a <kbd> tag.

Before

<img src="https://i.stack.imgur.com/CtiyS.png">

After

<kbd>
  <img src="https://i.stack.imgur.com/CtiyS.png">
</kbd>

And it renders like this:

https://i.stack.imgur.com/CtiyS.png">


Surrounding the markdown image syntax might not work for some markdown implementations. If the following does not work

<kbd>![alt-text](https://example.com/image.png)</kbd>

Try embedding the image as an HTML <img> tag instead

<kbd><img src="https://example.com/image.png" /></kbd>

Solution 2 - Html

Here on StackExchange sites, I like to use the "quote" markup > for this purpose.

For example:

> [![screenshot][1]][1]

  [1]: https://i.stack.imgur.com/CtiyS.png

renders like this:

> screenshot

Solution 3 - Html

You can use <table> tag to create tables without header.

<table><tr><td>
    <img src="/images/logo.png" />
</td></tr></table>

Solution 4 - Html

The way I do this on Gitlab is using a table like so:

| ![Alt name of image](/path-to-image.png) |
| ------ |

Solution 5 - Html

Another way is to use table's first cell for it.

Code:

|![pictureAliasName](pathOfPicture/pictureName.png)|
-

The - character is important in the code.

You can see the result here .

Solution 6 - Html

I often do like this at GitHub comment. Maybe some line breaks are needed.

# Added at 2021/05/24

// No end tag
<kbd> ![image_alt](image_path)

# Added at 2020/09/14

| ![...)
|-

label_text
|-
![...)

| ![...a) | ![...b)| ![...c)
|-|-|-
# Before / After

Before | After
-|-
![...a) | ![...b)

# with Background color

||
|-
||
![...)

Solution 7 - Html

Another way is to provide the border yourself in an image editing tool and upload that.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionmadox2View Question on Stackoverflow
Solution 1 - HtmlkdbanmanView Answer on Stackoverflow
Solution 2 - HtmldaveloyallView Answer on Stackoverflow
Solution 3 - HtmlgonseeView Answer on Stackoverflow
Solution 4 - HtmlLeopold KristjanssonView Answer on Stackoverflow
Solution 5 - Htmlkesadae11View Answer on Stackoverflow
Solution 6 - HtmlKABAView Answer on Stackoverflow
Solution 7 - HtmlblackcatwebView Answer on Stackoverflow