Add images to README.md on BitBucket
ImageGitMarkdownBitbucketImage 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)