How can I reference an image in GitLab markdown in the current directory with the path starting with ./ dot slash?

ImageMarkdownGitlab

Image Problem Overview


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?

Image Solutions


Solution 1 - Image

![](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.

Solution 2 - Image

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, 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

Solution 3 - Image

  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.

Solution 4 - Image

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 <>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionlofidevopsView Question on Stackoverflow
Solution 1 - ImageCiro Santilli Путлер Капут 六四事View Answer on Stackoverflow
Solution 2 - ImageMonTeaView Answer on Stackoverflow
Solution 3 - ImageBoagoView Answer on Stackoverflow
Solution 4 - ImageAldoView Answer on Stackoverflow