如何在Markdown中显示本地图像


141

我在markdown中尝试以下操作,但似乎不起作用,有人知道如何在markdown中显示本地图像吗?我不想为此设置网络服务器。谢谢

![image](files/Users/jzhang/Desktop/Isolated.png)

Answers:


108

我怀疑路径不正确。如user7412219所述,ubuntu和Windows对路径的处理不同。尝试将图像与笔记本计算机放在同一文件夹中并使用:

![alt text](Isolated.png "Title")

在Windows上,桌面应位于:C:\ Users \ jzhang \ Desktop


5
“标题”是做什么的?
niCk CAel

6
@niCkcAMel如果将鼠标悬停在图像上,将显示“标题”。如果无法显示图像,则显示“替代文字”。
克里斯(Chris)

2
“尝试将图像放入同一文件中”:应该是文件 -> 文件夹吗?
帕特里克

59

以下内容适用于图像到文档旁边子文件夹的相对路径(当前仅在Windows系统上进行了测试):

![image info](./pictures/image.png)

1
恕我直言,最好的答案是,以所需的方式使用GitHub markdown文件。
Erich Kuester

最好的答案!
Zahra Taheri

21

最好的解决方案是提供一个相对于md文档所在文件夹的路径。

当浏览器尝试解析本地文件的绝对路径时,可能会遇到麻烦。可以通过通过Web服务器访问文件来解决,但是即使在这种情况下,映像路径也必须正确。

在文档的同一级别拥有一个包含所有图像的文件夹是最干净,最安全的解决方案。它将加载到GitHub,本地,本地Web服务器上。

images_folder/img.jpg  < works


/images_folder/img.jpg  < this will work on webserver's only (please read the note!)

使用绝对路径,只能使用如下网址访问图像:http://hostname.doesntmatter/image_folder/img.jpg


1
+1表示“最佳解决方案是提供相对于md文档所在文件夹的路径”。它在我的本地计算机上显示了图像。
MasterJoe

17

一步步 :

  1. 创建一个名为Images的目录,并放置Markdown将渲染的所有图像。

  2. 例如,放example.png放入Images

  3. 加载位于下方的 example.png之前 Images目录。

![title](Images/example1.png)

注意图片目录必须位于带有.md扩展名的markdown文本文件的同一目录下。


该“图像”文件夹的路径是什么?您是否将其添加到vscode中的任何配置中?
K_dev

1
@K_dev“ images”目录必须位于扩展名为“ .md”的markdown文本文件的同一目录下。我没有向vscode添加任何配置。
nevzatseferoglu

14

要在markdown文件中添加图像,.md文件和图像应位于同一目录中。与我的情况一样,我的.md文件位于doc文件夹中,因此我也将图像移到了同一文件夹中。之后,在.md文件中编写以下语法

![alt text](filename)

喜欢 ![Car Image](car.png)

这对我有用。


7

像这样添加一个本地图像对我有用: ![alt text](file://IMG_20181123_115829.jpg)

没有file://前缀,它将不起作用(Win10,带有MarkdownViewer ++插件的Notepad ++)

编辑:我发现它也适用于html标签,那是更好的方法: <img src="file://IMG_20181123_115829.jpg" alt="alt text" width="200"/>

Edit2:在Atom编辑器中,它只能在没有file://前缀的情况下工作。真是一团糟。


3

据我所知,对于Linux上的VSCode,只有将图像放入与.md发布文件相同的文件夹中时,才能正常显示本地图像。
即只有![](image.jpg)![](./image.jpg)将工作。
甚至绝对路径![](/home/bala/image.jpg)也行不通。


3

编辑:

为我工作(本地图像)

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

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

markdown文件README.md与doc目录处于同一级别。

在您的情况下,您的markdown文件应与目录文件处于同一级别。

为我工作(带有原始路径的绝对URL)

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

对我不起作用(URL与Blob路径)

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

我认为您的网址无效:https后缺少一个斜杠。也许有点晚了。:)
资助者

谢谢@Funder,我更正了网址,这是输入错误。😉
灵境法国

2

不显示本地图像的另一种可能性是在图像参考空间之前无意缩进![alt text](file)

这使其成为“代码块”,而不是“图像包含”。只需删除前导空格。


1

我在R Markdown中插入图片时遇到问题。如果我执行整个URL:C:/Users/Me/Desktop/Project/images/image.png它会起作用。否则,我必须将markdown放到与图像相同的目录中,或者放到其祖先目录中。似乎在引用图像时会忽略声明的编织目录。


这不能为问题提供答案。您可以搜索类似的问题,或参考页面右侧的相关和链接的问题以找到答案。如果您有一个相关但不同的问题,请提出一个新问题,并包括指向该问题的链接以帮助提供上下文。请参阅:提问,获取答案,不要分心
Shanteshwar Inde

0

要么将图像与降价文件放在同一文件夹中,要么使用图像的相对路径。


0

只需复制图像然后粘贴,您将获得输出

![image.png](attachment:image.png)


0

根据您的工具-您还可以将HTML注入markdown。

<img src="./img/Isolated.png">

假设您的文件夹结构为:

 ├── img
     └── Isolated.jpg
 ├── README.md

-2

无需设置网络服务器

我尝试将我的本地图像上传到要点的注释部分,然后简单地复制并粘贴生成的URL。为我工作😊

在此处输入图片说明


-3

我有一个解决方案:

a)互联网示例:

![image info e.g. Alt](URL Internet to Images.jpg "Image Description")

b)本地图像示例:

![image Info](file:///<Path to your File><image>.jpg "Image Description")
![image Info](file:///C:/Users/<name>/Pictures/<image>.jpg "Image Description")

涡轮字节

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.