Home > Net >  Adding image to markdown using WebIDE in GitLab results in broken image - cause and fix?
Adding image to markdown using WebIDE in GitLab results in broken image - cause and fix?

Time:04-12

I am writing to a README.md in a git repo hosted on our free tier, self-managed GitLab server. The project behind the repository uses the standard built-in template with a README file also available for project hosted on Sample for broken image

  • The image files are in a weird form similar to iVBORw0KGgoAAAANSUhEUgAAAo0AAAHNCAYAAAB7HUG8AAAgAElEQVR4nOzdeViU9f7/8SeLwyaLgImiB9DSyVKhjohJqZknsUWsjksnt44dNa207Bv67fzUzrnUU2mampmWmvVVWzFNsMKlSEjziJqClgIKhuLoCAnjyPL743Y2GPZlZuD9uC4uh3vuuefj3HMzr/...

    and cannot be previewed inside the web browser (currently working with Edge so Chrome-based).

  • While I was inserting the images they got generic names such as image.png, image-1.png and so on. So I used the WebIDE to rename those (names with spaces).

    Checking the URL of the image I've given as an example above I saw that it is https://GITLAB_SERVER/USER/PROJECT/-/raw/master/fork_project.png

    In addition the file list shows

    File as viewed inside file view of repository

    Could it be that the spaces were a problem and through the automatic conversion GitLab got confused? How to I make sure this doesn't happen and how do I fix it?

    CodePudding user response:

    Apparently it is a bug that has been fixed. It seems I need to contact our admins to check on whether they are planning on patching our self-managed free GitLab instance.

    CodePudding user response:

    Copy-pasting images into GitLab passes the picture to GitLab where it does some magic to auto-write the markdown for you and serves the content. This is how you are able to add images into comments and on issues by just hitting CTRL V.

    However, images are just be pasted directly into a Markdown document. This is not the intended use case for Markdown -- some platforms though, like GitLab, perform auto-magic to let you do this.

    A standard method for adding images would be to upload the images to the repository and then reference them in the markdown file like so:

    Consider the below as an example repository:

    your_repo:
      - images/
          - image1.png
          - image2.png
      - README.md
    

    To add the images into the Markdown of your README.md, you would reference them as such:

    ![alternate text](link to image)

    For example, using relative filepaths to the README.md file:

    ![Logo](./images/image1.png)


    However, with GitLab, you can paste (CTRL V) into the Web IDE while editing a Markdown file and it will automatically upload the image as image.png (or similar name) into the repository, writing the embed Markdown for you. You are then free to update the link and rename the image as desired.

    It seems that you may want to avoid spaces in the names though. :)


    Edit: Learned that the Web IDE does support pasting!

    • Related