logo标签列表

如何在Markdown中展示本地图片？

imagemarkdown
722

有人知道如何在Markdown中显示本地图片吗？我不想为此设置Web服务器。

我在Markdown中尝试了以下方法，但它并没有起作用：

！[image]（files / Users / jzhang / Desktop / Isolated.png）

5
请注意：如果文件路径中有空格，必须进行URL编码，否则链接可能在某些系统（例如GitHub）中无法正常工作。 - Christian Long
4
![image](files://C:/Users/jzhang/Desktop/Isolated.png) - stysan
22个回答
8

编辑提示：

适用于本地图像的操作

以下是需要翻译的内容：

![system schema](doc/systemDiagram.jpg)

 tree
 ├── doc
     └── jobsSystemSchema.jpg
 ├── README.md

README.md文件应与doc目录位于同一级别。

在您的情况下，您的markdown文件应该与目录文件位于同一级别。

为我工作（使用原始路径的绝对URL）

![system schema](https://server/group/jobs/raw/master/doc/systemDiagram.jpg)

对我不起作用（具有blob路径的URL）

![system schema](https://server/group/jobs/blob/master/doc/systemDiagram.jpg)
我认为你的URL无效：https后面缺少一个斜杠。可能有点晚了。 :) - funder7
谢谢@Funder，我更正了URL，这是一个打错的问题。 - Lingjing France
当我从托管在 Github 上的 MD 文件访问图像时，使用 Blob 路径取得了成功。 - Mark Chackerian
6
快速编辑了一下（并修正了错别字）以帮助阅读，应该是正确的链接，但值得检查一下 :) - Daniel Brose
1
专业版：使用<img>标签添加HTML自定义功能。 - Sumax
5
据我所知，对于在Linux上使用VSCode来说，只有当您将图像放入与.md文章文件相同的文件夹中时，本地图像才能正常显示。
也就是说，只有![](image.jpg)或![](./image.jpg)才能正常工作。
即使是绝对路径![](/home/bala/image.jpg)也无法正常工作。
4
另一种导致本地图片未显示的可能性是图像引用的意外缩进 - 即在![alt text](file)之前的空格。这会使其成为“代码块”而非“图像包含”。只需删除前导空格即可。
4

如果你有很多相同图片的文本需要显示，你可能会发现以下语法类似于 markdown中的引用链接 很方便：

![optional text description of the image][number]

[number]: URL

例如：


![][1]

![This is an optional description][2]




[1]: /home/jerzy/ComputerScience/Parole/Screenshot_2020-10-13_11-53-29.png
[2]: /home/jerzy/ComputerScience/Parole/Screenshot_2020-10-13_11-53-30.png
2

我在使用R Markdown插入图片时遇到了问题。如果我使用完整的URL：C:/Users/Me/Desktop/Project/images/image.png，它通常会起作用。否则，我必须将markdown文件放在与图片相同的目录中或其祖先目录中。看起来，当引用图片时，声明的knitting目录被忽略了。

最初的回答：

It seems that the knitting directory is ignored when referencing images. Try using the full URL for the image or placing the markdown file in the same directory as the image.

这并没有提供问题的答案。你可以搜索类似的问题，或者参考页面右侧的相关和链接问题以找到答案。如果你有一个相关但不同的问题，提出一个新问题，并包含一个链接到这个问题来帮助提供上下文。请参阅：提问、获取答案，无干扰。 - Shanteshwar Inde
@Shanteshwar 虽然表述为问题，但这提供了对所问问题的工作性解决方案。 - CubicInfinity
2
只需复制图片，然后粘贴即可获得输出。
![image.png](attachment:image.png)
可能是在本地Jupyter Notebooks和Github渲染器上显示图像的唯一方法，当图像不放置在同一个目录中时。 - undefined
1

要么将图像放在与Markdown文件相同的文件夹中，要么使用图像的相对路径。

1

在.md文件中显示本地图片（VSCode阅读器扩展）

在我的情况下，我尝试了很多解决方案来在我的vscode .md阅读器中显示图片，但是它们都不起作用。但是似乎只有当您从根目录指定图像的完整路径时才有效，例如：![我的图片](/c:/fullpath/to/image.png)。
诀窍是您需要在驱动器的字母c之前指定斜杠/

0

对我来说，在指定以./开头的图像URL时，与GitLab一起工作得很好。

请仔细检查您在[]和()之间没有空格

![img] (URL)
      ^

有时候非常令人困惑。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接