在 GitLab 中使用 WebIDE 将图像添加到 markdown 会导致图像损坏 - 原因和修复？

Question

我正在写信给 README.md 中的 git 存储库，该存储库托管在我们的免费层、自我管理的 GitLab 服务器上。存储库背后的项目使用标准内置模板和 README 文件，也可用于 gitlab.com.

上托管的项目

使用 Windows 10 提供的截图工具，我在文档中复制粘贴了一堆图像（也看看它是否真的有效 :D）。图片已添加到文件中以供提交，并且在 GitLab WebIDE 的 Markdown 预览 window 中显示时没有任何问题。在 Markdown 视图中，图像是链接的（例如 ![description](image_file.png)

然而，在提交更改后，我返回到存储库的初始视图（文件列表加上 README.md 文件的预览）并看到以下问题：

图像显示为默认图标（用于缺少图像或无法显示的图像）后跟图像的超链接名称：
图像文件的格式很奇怪，类似于 iVBORw0KGgoAAAANSUhEUgAAAo0AAAHNCAYAAAB7HUG8AAAgAElEQVR4nOzdeViU9f7/8SeLwyaLgImiB9DSyVKhjohJqZknsUWsjksnt44dNa207Bv67fzUzrnUU2mampmWmvVVWzFNsMKlSEjziJqClgIKhuLoCAnjyPL743Y2GPZlZuD9uC4uh3vuuefj3HMzr/...

并且无法在网络浏览器中预览（目前使用 Edge，因此基于 Chrome）。

当我插入图像时，它们得到了通用名称，例如 image.png、image-1.png 等等。所以我使用 WebIDE 重命名那些（带空格的名称）。

检查我在上面作为示例给出的图像的 URL，我看到它是 https://GITLAB_SERVER/USER/PROJECT/-/raw/master/fork_project.png

另外文件列表显示

会不会是空格有问题，通过自动转换GitLab搞糊涂了？如何确保这种情况不会发生以及如何解决？

Answer 1

Copy-pasting images into GitLab 将图片传递给 GitLab，在那里它会对 auto-write markdown 进行一些魔术处理并提供内容。这就是您只需点击 CTRL+V.

即可将图片添加到评论和问题中的方法

但是，图片只是直接粘贴到 Markdown 文档中。这不是 Markdown 的预期用例——尽管某些平台，如 GitLab，执行 auto-magic 让你这样做。

添加图片的标准方法是将图片上传到存储库，然后在 markdown 文件中引用它们，如下所示：

将以下内容视为示例存储库：

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

要将图像添加到 README.md 的 Markdown 中，您可以这样引用它们：

![alternate text](link to image)

例如，使用 README.md 文件的相对文件路径：

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

但是，使用 GitLab，您可以在编辑 Markdown 文件时将 (CTRL+V) 粘贴到 Web IDE 中，它会自动将图像上传为 image.png（或类似名称) 到存储库中，为您编写嵌入的 Markdown。然后您可以自由更新 link 并根据需要重命名图像。

看来您可能希望避免在名称中使用空格。 :)

编辑：得知网络IDE确实支持粘贴！

Answer 2

显然这是一个 bug 已经修复。看来我需要联系我们的管理员，看看他们是否计划修补我们的 self-managed 免费 GitLab 实例。

在 GitLab 中使用 WebIDE 将图像添加到 markdown 会导致图像损坏 - 原因和修复？

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

image

gitlab

markdown