我如何显示本地图像markdown?

有人知道如何在markdown显示本地图像吗?我不想为此设置网络服务器。

我尝试以下markdown，但它不起作用:

# EYZ0

650778 次浏览
小开

我怀疑这条路不对。正如user7412219所提到的，ubuntu和windows处理路径不同。试着把图片和你的笔记本放在同一个文件夹中，并使用:

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

在windows上，桌面应该在:C:\Users\jzhang\Desktop

小开

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

这使得它成为“代码块”而不是“图像包含”。只要去掉前面的空格。

小开

要在markdown文件中添加图像，.md文件和图像应该在同一个目录中。在我的情况下，我的.md文件是在doc文件夹，所以我也移动图像到相同的文件夹。然后在.md文件中写入以下语法

![alt text](filename)

像# EYZ0

这对我来说很有效。

小开

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

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

在文档的同一层次上有一个文件夹，包含所有的图像，是最干净和最安全的解决方案。 它将加载在GitHub，本地，本地web服务器 
images_folder/img.jpg  < works




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

使用绝对路径，图像只能通过如下url访问:http://hostname.doesntmatter/image_folder/img.jpg

小开

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

小开

我有一个解决办法:

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

TurboByte

小开

下面的工作与图像到文档旁边的子文件夹的相对路径:

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

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

没有file://前缀，它不能工作(Win10, notepad++与MarkdownViewer++插件)

编辑:我发现它也适用于html标签，这是更好的方式: # EYZ0 < / p >

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

小开

我在R Markdown中插入图像时遇到了问题。如果我做整个URL: C:/Users/Me/Desktop/Project/images/image.png，它往往工作。否则，我必须把标记放在与图像相同的目录中，或者放在它的祖先目录中。在引用图像时，似乎忽略了声明的编织目录。

小开

类unix操作系统解决方案。

循序渐进:
  1. 创建一个名为Images的目录，并放置所有将由Markdown渲染的图像。

  2. 例如，将example.png放到Images中。

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

![title](Images/example.png)

< >强注意< / >强: Images目录必须位于markdown文本文件的相同目录下，该文件具有.md扩展名。

小开

编辑:

为我工作(本地形象)

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


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

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

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

为我工作(带原始路径的绝对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)
小开
据我所知，对于Linux上的VSCode，只有当你把图像放到与你的.md post文件相同的文件夹中时，本地图像才能正常显示 即只有![](image.jpg)或![](./image.jpg)可以工作 甚至像# eyz0这样的绝对路径也不能工作
小开

只要复制图像，然后粘贴，你就会得到输出

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

在Jupyter笔记本Markdown中，您可以使用

<img src="RelPathofFolder/File" style="width:800px;height:300px;">
小开

根据你的工具-你也可以注入HTML markdown。

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

这假设你的文件夹结构是:

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

你可能会发现遵循类似于参考链接降价的语法很方便，特别是当你有一个文本有许多相同的图像显示时:

![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
小开

如果图像有括号，它将不会显示

![alt text](Isolated(1).png)

重命名图像并删除括号

![alt text](Isolated-1.png)
< p >更新: 如果你在文件路径中有空格，你应该考虑重命名它，或者如果你使用JavaScript，你可以使用

编码它 
encodeURIComponent(imagePath)

此外，总是尝试用小写字母来保存图像和文件，请养成这个习惯，尽管这只是我个人的观点

小开

基本语法是![Image description](Any_Image_of_your_choice.png "title")。在我的例子中，我在![Image description](Any\ Image\ of\ your\ choice.png)中使用了Any\ Image\ of\ your\ choice.png而不是![Image description](Any_Image_of_your_choice.png)，它不起作用。所以我想说，确保检查图像目录和图像名称不包含空格，如果这样使用下划线(_)而不是空格。

Ubuntu 18.04在Jupyter笔记本上使用markdown时遇到问题。

小开

这对我来说在ubuntu中很有效:

![Image](/home/gps/Pictures/test.png "a title")

降价文件在:

/home/gps/Documents/Markdown/

图片文件在:

/home/gps/Pictures/
小开

只需从markdown文件中添加相对图像文件路由

![localImage](./client/src/assets/12.png)

提交答案