It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How to add images to Readme.md

Abhijit Tomar Aug 26, 2015

Hello,

I am trying to add some images to my Readme.md file as

 

![picture](http://stash.xxxxxx.com/projects/zzzzz/img/abc.png)

 

but its not working. when i view the readme, all i see is the plain text

 

![picture](http://stash.xxxxxx.com/projects/zzzzz/img/abc.png)

please help

7 answers

1 accepted

8 votes
Answer accepted
Mibex Software Aug 26, 2015

Hi,

You can include an image by specifying the path relative to your repository root directory:

![picture](img/abc.png)

Hope this helps.

Cheers,

Michael

 

Abhijit Tomar Aug 26, 2015

thanks michael but i still get the plaintext ![picture](img/stormConsole.png) also, i cant seem to be able to escape quotes. i tried using \' but this shows up as \' does stash render markdowns differently ?

Mibex Software Aug 26, 2015

I've just checked it again: ![Alt text](path/to/your/img.png) works as intended. Do you have it on a separate line?

Ilya Pashchenko Aug 30, 2017

No, it doesn't show image in README on project page. I've tryied both relative links and absolute path to dropbox hosted image (http://*.png) - doesn't work... This is sad. 

Matt Rakestraw Sep 18, 2017

Ilya, I was having same problem. If I removed all space in front of the tag, my image started showing up. Apparently, you can't indent.

Like # people like this
[Innovation] DK Dec 11, 2017

![alt text](images/successful.png)

This worked for me.

Ralf Heitzler Apr 23, 2018 • edited

I had the same problem and tried a lot (relative path, upper/lowercase etc.).

What solved it finally was adding the alternative text.

As Michael said, this is a valid format working locally in editor preview and remote on Stash/Bitbucket:

![alternativetext](subfolder/image.png)

 

Youssef Boujraf May 02, 2018

Dear all,

Same problem since new version of bitbucket.

Last week, no issue to display the picture.

Now, the issue is the picture is not displayed.

To get back the picture, we need :

- Edit the readme.md file

- press CANCEL

Then the picture is displayed again.

 

 Capture.PNG

the path is : ![home](images/home.png)

Thanks if anybody could highlight me about this.

 

Best regards,

Youssef

Like Lennart Haas likes this
Maneet Goyal May 02, 2018 • edited May 03, 2018

Changing my comment to STILL NOT WORKING.

Ian Geiser May 03, 2018

It still will not render correctly on the overview page.

Youssef Boujraf May 03, 2018

Dear

 

Yest it is.

Without :

- Edit the readme.md file

- press CANCEL

No pictures.

 

Best Regards,

Youssef

Michael Neil May 03, 2018

This does not work as intended. Maybe it's working in existing README's but not new ones.

I added an image to my repo in a folder. I added the markdown

![Screenshot](examples/screenshot.png)

When I view my readme on bitbucket I get a broken image link. I opened the inspector and the path/image are correct! The file is requested and returns a 200. Except that the content type is text/html :(

It appears that the markdown parser is interpreting the code incorrectly.

Maneet Goyal May 03, 2018

@Youssef Boujraf Your fix works temporarily. On reloading the page, the images get lost again.

Carlos Padial May 04, 2018

same problem here, it was working but with the new design the images disappeared...

Mike Makuch Aug 16, 2018

Same problem here

Nathan Rzepecki Aug 27, 2018

Anyone work this out yet?

Noah Rodenbeek Aug 28, 2018

I'm having the same issue. It does work if I go to the Readme file, push Edit, then push Cancel. Otherwise, it's just showing the alt-text and a broken image icon. I mean, if nothing else, can the broken image icon go away and the alt text just behave like it normally would on a website?

Amir Naqui Sep 21, 2018

It does work, but the problem is it only works in the master branch. If you have a feature branch and try to test it out, it will appear as a broken link. When you merge to the master, your image will show up. Atlassian should fix this.

Like Lourenzo Ferreira likes this
Mark Bonsack Dec 09, 2018 • edited

Not only does it only work in the master branch, the image still won't display.  You  have to actually click on the alternate text (which is hyperlinked) to the image file, which then displays properly in a new window.

EDIT:  I had an extra [] pair around the alt-text; weird behavior for sure... 

But still only works with master.

4 votes
Mikko Salonen Aug 29, 2018 • edited

Get the full path by navigating to your image file, push 'raw file'-button right of the page, copy the path except for the very end (e.g. image.png?at=refs%2Fheads%2Fmaster). In general the path should be https://......../[project_name]/raw/[image_folder]/[image.png]

Bernardo Doré Sep 26, 2018

This works.

Like davidcmalaspina likes this
Samuel Ferreira Oct 18, 2018

This works only in preview mode (while editing the README.md file inside the bitbucket itself)

Arshak Hovhannisyan I'm New Here Mar 13, 2019

Thank you a lot. 

0 votes
Noah Rodenbeek Aug 28, 2018 • edited

     

0 votes
Dwayne Mcnab Oct 08, 2018

This worked for me. I used the absolute path suggested by @Mikko Salonen along with the following format:

.. figure:: https://absolute/path/to/image.png
   :alt: alias of image
0 votes
Pedro Freitas Dec 10, 2018

How does Atlassian even dare to claim projects are migrating from GitHub into here if it does not support such simple feature...

Srikrushna Pal I'm New Here Jan 17, 2019

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)
0 votes
Angel Ortiz I'm New Here Mar 03, 2019

A relative path works just fine, if you are on the master branch.

 

![alt_text](images/your_image_name.png)

 

I changed the README.md file in the development branch, but when pushing changes the images are not showing up. The reason is: because BitBucket looks for the raw images in the master branch.

0 votes
Marcy Vernon I'm New Here Monday • edited

In each repo's Issue Tracker under Settings, I added an image to the "No issue tracker":

Screen Shot 2019-06-17 at 11.51.51 PM.png

That provided a link that I copied and pasted into the repo's Readme.md file. This works for me and is the same technique some use on GitHub.

Suggest an answer

Log in or Sign up to answer
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published in Bitbucket Pipelines

Building a Bitbucket Pipe as a casual coder

...ipe.sh :  #!/bin/bash source "$(dirname "$0")/common.sh" enable_debug extra_args="" if [[ "${DEBUG}" == "true" ]]; then extra_args="--verbose" fi # mandatory variables R...

3,116 views 1 20
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you