113

I have stored a Markdown file and an image file in a Git repo as follows:

  • readme.markdown
  • images/
    • image.png

I reference the image from readme.markdown like this:

![](./images/image.png)

This renders as expected in ReText, but does not render when I push the repo to GitLab.

How can I reference the image from the Markdown file so that it renders when viewed in GitLab?

0

4 Answers 4

151

![](images/image.png) without the ./ works for me: https://gitlab.com/cirosantilli/test/blob/bffbcc928282ede14dcb42768f10a7ef21a665f1/markdown.md#image

I have opened a request for this to be allowed at: http://feedback.gitlab.com/forums/176466-general/suggestions/6746307-support-markdown-image-path-in-current-directory-s , but it entered into Internet void when GitLab dumped UserVoice.

3
20

Similar problem with Gitlab & Images in readme.md

I had the same problem with my Logo inside of a readme.md in my Extension and with Gitlab (running on a Ubuntu-Server).

Ubuntu Version: 16.04.2 LTS

Gitlab Version: 10.3.4 56dc722

My Solution

You can also use a snippet for image-usage in your readme.md by simply following these steps:

In the Overview of Gitlab (Logged in)

  1. Go to the project where your want to use that image
  2. in the topnavigation on the right click the + button
  3. UNDER YOUR PROJECT click new snippet in the dropdown

In the new snippet form

  1. Type a title
  2. On the bottom right corner of the RTE-Field click Attach a file
  3. Select your file and press Open
  4. Click the checkbox Public
  5. name the snippet (under the Checkboxes) [the field beside the 1 not the "header"]
  6. Click Create Snippet

Troubleshooting

If you get the following error you forgot point 5:

The form contains the following error:

Content can't be blank

Now we have a working Imagelink

Now, if you edit the snippet again, you can copy the Image-Code looks like this:

![Alt-Text](/uploads/472fc65e1a1bc11b355cc03d6c339fd5/logo_.svg)

to your readme.md file.

If you like to use a link also, it has to look like that:

[![Alt-Text](/uploads/4013547485b9e88e98f1af3870116a29/logo_mit_claim.svg)](https://your-destination.com)

Hope it helps other ppls

4
  • Dont works for me. Neither the snippet contains the image. If I click on the link my browser ask to save as text file: image.svg.txt, and dont show the image Mar 18, 2019 at 9:49
  • 3
    Finally I found that your workaround also works for me, just there was another issue in my case: My svg file was exported by inkscape, which works well in local markdown documents, but I need to set plain svg to use in gitlab. Mar 18, 2019 at 10:31
  • While interesting, I don't think this meets the author's request. They seem to want to keep their document self-contained and want version control to maintain the link between the specific image file and the specific document. Your solution is basically using GitLab Snippets as a file hosting service for your image file.
    – mtalexan
    Dec 10, 2020 at 20:53
  • Also I don't think this solution works if anyone other than the author themself (while logged in and authenticated to GitLab) wants to view the file. The Snippet has permissioned access that limits who can get to the file that's completely separated from the repo itself.
    – mtalexan
    Dec 10, 2020 at 20:54
9
  1. Go to your project
  2. Select issues
  3. Create new issue
  4. In the new issue description, click on attach file
  5. Browse to your file and attach
  6. A link in the form "filename" will be generated on the description pane.
  7. Copy the link and paste it in your readme.md file
  8. Do not submit the issue unless you had intended to.
3
  • This solution (with a modification) is the one I prefer, because it allows copy + paste to add an image to the Readme.md In short, In an Issue : 1) generate a URL for the image and then 2) copy and paste the new URL to the Readme.md (in edit mode) and 3) with preview mode in the Readme.md file the image will display. Feb 15, 2020 at 9:39
  • Your solution is basically to mis-use the GitLab Issue system to get GitLab to act as a file server for the image. The author seems to want linked version control and self-contained documents or they could have added the image to any cloud storage as a publicly shared file or something similar. While this solution is interesting, I don't think it satisfies the request.
    – mtalexan
    Dec 10, 2020 at 20:51
  • This works to host your image on Gitlab's servers, but just a word of caution that you won't know how Gitlab's cleanup policy works, e.g. will they automatically clean up unreferenced images / images uploaded but were eventually not attached in an issue, so the best bet would still be to store your images somewhere more permanent Aug 19, 2022 at 15:28
6

My images where in the .bin/img/ folder.
I had to use below format to get an image:

![alt text](<./bin/img/some_image.png>) 

Mind the <>

2
  • The pointed brackets seem to be required at least for gitlab 9.1.4
    – dschulten
    Sep 1, 2020 at 10:05
  • The correct answer! This is better than omitting ./ which does work but would make the reference absolute to the repository root. Using <./...> however also works in subdirectories.
    – ypnos
    Jan 22, 2021 at 11:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.