diff --git a/assets/images/help/writing/image-rendered.png b/assets/images/help/writing/image-rendered.png new file mode 100644 index 000000000000..f7461937e1f4 Binary files /dev/null and b/assets/images/help/writing/image-rendered.png differ diff --git a/content/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md b/content/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md index 5a8334d23415..2a157d36bc4b 100644 --- a/content/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md +++ b/content/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md @@ -87,7 +87,7 @@ You can create an inline link by wrapping link text in brackets `[ ]`, and then {% tip %} -**Tip:** {% data variables.product.product_name %} automatically creates links when valid URLs are written in a comment. For more information, see "[Autolinked references and URLS](/articles/autolinked-references-and-urls)." +**Tip:** {% data variables.product.product_name %} automatically creates links when valid URLs are written in a comment. For more information, see "[Autolinked references and URLs](/articles/autolinked-references-and-urls)." {% endtip %} @@ -99,6 +99,41 @@ You can create an inline link by wrapping link text in brackets `[ ]`, and then {% data reusables.repositories.relative-links %} +## Images + +You can display an image by adding `!` and wrapping the alt text in`[ ]`. Then wrap the link for the image in parentheses `()`. + +`![This is an image](https://myoctocat.com/assets/images/base-octocat.svg)` + +![Rendered Image](/assets/images/help/writing/image-rendered.png) + +{% data variables.product.product_name %} supports embedding images into your issues, pull requests{% ifversion fpt %}, discussions{% endif %}, comments and `.md` files. You can display an image from your repository, add a link to an online image, or upload an image. For more information, see "[Uploading assets](#uploading-assets)." + +{% tip %} + +**Tip:** When you want to display an image which is in your repository, you should use relative links instead of absolute links. + +{% endtip %} + +Here are some examples for using relative links to display an image. + +| Context | Relative Link | +| ------ | -------- | +| In a `.md` file on the same branch | `/assets/images/electrocat.png` | +| In a `.md` file on another branch | `/../main/assets/images/electrocat.png` | +| In issues, pull requests and comments of the repository | `../blob/main/assets/images/electrocat.png` | +| In a `.md` file in another repository | `/../../../../github/docs/blob/main/assets/images/electrocat.png` | +| In issues, pull requests and comments of another repository | `../../../github/docs/blob/main/assets/images/electrocat.png?raw=true` | + +{% note %} + +**Note**: The last two relative links in the table above will work for images in a private repository only if the viewer has at least read access to the private repository which contains these images. + +{% endnote %} + +For more information, see "[Relative Links](#relative-links)." + + ## Lists You can make an unordered list by preceding one or more lines of text with `-` or `*`.