Add images to README.md on BitBucket

ImageGitMarkdownBitbucket

Image Problem Overview


Can I somehow reference the image from readme.md file so that it renders when viewed in BitBucket directly from project (without hosting the image elsewhere on web) ?

UPDATE:

The issue was resolved so it's working now as it was explained in the question:

I have stored readme.md file and an image file in a BitBucket repo as follows:

  • readme.md
  • images/
  • scheme.jpg

I reference the image from readme.md as follows:

![Scheme](images/scheme.jpg)

Image Solutions


Solution 1 - Image

Update 2016-12-14

This is fixed now, please see the resolved status of this issue: https://bitbucket.org/site/master/issues/6315/relative-urls-in-readmemd-files-only-work

You can now use

![Scheme](images/scheme.jpg)

to refer to images in your repo using relative links.

Old Answer

At the moment, this is not possible. BitBucket does not support relative links to images in markdown.

The following issue in BitBucket's issue tracker has more info on this, its current status (2015-02-27) is open: https://bitbucket.org/site/master/issue/6315/relative-urls-in-readmemd-files-only-work

The BitBucket team have indicated on the ticket that they intend to fix this "in the coming quarters" (comment from 2014-12-19: https://bitbucket.org/site/master/issue/6315/relative-urls-in-readmemd-files-only-work#comment-14400835).

The ticket contains a couple of (ugly) workarounds, using a combination of two links, where one works locally, and one on the web site (https://bitbucket.org/site/master/issue/6315/relative-urls-in-readmemd-files-only-work#comment-15852315) as well as some other possible solutions, none of which are particularly nice or reliable.

Solution 2 - Image

Update: please see the accepted answer as the issue is now fixed and this workaround is obsolete.


According to Altassian it's not supported so you need to use absolute URLs. You can use branch names instead of commit hash to allow the link to be updated if you change the image in later commits.

For example, here is taking the /path/to/image.jpg, from the master branch:

[Your Link Text](https://bitbucket.org/username/reponame/raw/master/path/to/image.jpg)

Solution 3 - Image

>Don't use any spaces in image or directory names. For example: > ![](images/app screens/screen 10.png) > should become > > Sub-folders can be used for other md documents. Again, I recommend replacing spacing with dashed even in folders that only contain md or other files. > >Not sure about this, but the starting document might need to be named README.md, and images might need to be in a top-level folder named "images" in the same directory as the README.md file. > >Finally, please refresh your page when you see a broken image link. I noticed some images would load and others were not even though they were in the same format.

For more Info, please, have a look at Atlassian: Add images to a wiki page and russells-rocksauce answer in bitbucket issues forum

Solution 4 - Image

It's very simple

Just upload your image to the repository root, and link to the filename without any path, like so:

![your_image_name](your_image_name.png)

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
QuestionDanny DanView Question on Stackoverflow
Solution 1 - ImagenwinklerView Answer on Stackoverflow
Solution 2 - ImageSébastien DawansView Answer on Stackoverflow
Solution 3 - ImageGG86View Answer on Stackoverflow
Solution 4 - ImageSrikrushnaView Answer on Stackoverflow