78

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)

Danny Dan
  • 1,215
  • 1
  • 16
  • 32

4 Answers4

68

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.

nwinkler
  • 52,665
  • 21
  • 154
  • 168
  • Yes, it is fixed now. – joan Dec 14 '16 at 09:39
  • Worked for me. Side note: Incase image is at the same root level as readme, then the relative path will consist of only the image name and this didn't work for me. Once I created a folder and placed images under it, as above-it worked. – VinjaNinja Feb 04 '22 at 08:54
  • Note: If you're editing the md file on the Preview window, the images _won't be shown_. You'll need to commit the changes and _clear the cache_. – Eric Wu Jun 27 '22 at 16:32
  • Not working for me either. – Jason Feb 14 '23 at 22:38
17

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)
Sébastien Dawans
  • 4,537
  • 1
  • 20
  • 29
  • 1
    `https://bitbucket.org///raw//` – Benny Apr 03 '17 at 13:42
  • 2
    This works. The important part is to use **raw** in the path to make it work. – andude May 06 '18 at 10:17
  • @Benny: Thanks for your comment: I upvoted, because it helped me. But following filling in the blanks in your comment will not work for branches other than master (and note I do not have the image on the master branch yet). I think the safest bet is really to open the image as a raw file and the copy the link displayed in the address bar. In my case, `/` (referring to your answer) had to be replaced with `.PNG?at=refs%2Fheads%2Fdevelopment` (no backslash here by the way). – mgross Dec 18 '19 at 10:26
  • Updated answer from @nwinkler works now, this answer will work only when images are in master branch – SRi Feb 27 '21 at 09:31
1

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

GG86
  • 41
  • 6
  • Yes, but I found that the links above are better and updated. Indeed, Bitbucket has not the same limitation, like absolute URL for pictures, described in previous answers. – GG86 Nov 17 '16 at 15:14
-1

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)
Srikrushna
  • 4,366
  • 2
  • 39
  • 46