Add images to README.md on BitBucket

Solution 1:

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:

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:

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