如何在 Markdown 中显示本地图像？答案

【问题标题】：How do I display local image in markdown?如何在 Markdown 中显示本地图像？
【发布时间】：2017-05-27 00:49:09
【问题描述】：

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

我在markdown中尝试了以下方法，但它不起作用：

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

【问题讨论】：

注意：如果文件路径中有空格，则必须对它们进行 url 编码，否则链接在某些系统（例如 GitHub）中不起作用。

标签： image markdown

【解决方案1】：

我怀疑路径不正确。正如 user7412219 提到的，ubuntu 和 windows 处理路径的方式不同。尝试将图像放在与笔记本相同的文件夹中并使用：

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

在 windows 上，桌面应位于：C:\Users\jzhang\Desktop

【讨论】：

“标题”有什么作用？
@niCkcAMel 如果您将鼠标悬停在图像上，则会显示“标题”。如果图像无法显示，则显示“替代文本”。
"尝试将图像放在同一个文件中"：应该是 file --> folder？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

要在 Markdown 文件中添加图像，.md 文件和图像应该在同一目录中。就我而言，我的 .md 文件位于 doc 文件夹中，所以我也将图像移到了同一个文件夹中。之后在 .md 文件中写入以下语法

![alt text](filename)

点赞![Car Image](car.png)

这对我有用。

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

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

【解决方案5】：

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

【讨论】：

【解决方案6】：

我有一个解决方案：

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

涡轮字节

【讨论】：

【解决方案7】：

以下适用于将图像的相对路径放入文档旁边的子文件夹中：

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

【讨论】：

恕我直言最好的答案，以所需的方式使用 GitHub 降价文件。
![image info](pictures/image.png) 也可以

【解决方案8】：

添加本地图像对我有用：![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:// 前缀的情况下工作。真是一团糟。

【讨论】：

【解决方案9】：

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

【讨论】：

这并没有提供问题的答案。您可以search for similar questions，或参考页面右侧的相关和链接问题找到答案。如果您有一个相关但不同的问题，ask a new question，并包含指向此问题的链接以帮助提供上下文。见：Ask questions, get answers, no distractions

【解决方案10】：

类Unix操作系统解决方案。

一步步：

创建一个名为Images 的目录，并放置所有将由 Markdown 渲染的图像。
例如，将example.png 放入Images。
加载之前位于Images目录下的example.png。

![title](Images/example.png)

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

【讨论】：

“图片”文件夹的路径是什么？你有没有把它添加到 vscode 的任何配置中？
@K_dev "images" 目录必须位于扩展名为 ".md" 的 markdown 文本文件的同一目录下。我没有向 vscode 添加任何配置。
适用于 Jupyter Notebooks :-)
确保文件名中没有空格

【解决方案11】：

已编辑：

为我工作（本地图片）

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

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

markdown文件README.md与doc目录同级

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

为我工作（带有原始路径的绝对网址）

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

不适合我（带有 blob 路径的 URL）

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

【讨论】：

我认为您的网址无效：https 后缺少一个斜杠。有点晚了，也许吧。 :)
谢谢@Funder，我更正了网址，这是一个打字失误。 ?

【解决方案12】：

据我所知，对于 Linux 上的 VSCode，只有将图像放入与 .md 发布文件相同的文件夹中才能正常显示本地图像。
即只有 ![](image.jpg) 或 ![](./image.jpg) 可以工作。
即使像![](/home/bala/image.jpg)这样的绝对路径也不起作用。

【讨论】：

【解决方案13】：

只需复制图像然后粘贴，即可得到输出

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

【讨论】：

【解决方案14】：

在Jupyter Notebook Markdown，你可以使用

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

【讨论】：

做了快速编辑（和错字修复）以提高可读性，应该是正确的链接，但值得检查以防万一:)
专业版：使用<img > 标签添加了 HTML 自定义

【解决方案15】：

根据您的工具 - 您还可以将 HTML 注入到 Markdown 中。

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

这假设您的文件夹结构是：

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

【讨论】：

只有这在 VSCode 降价显示上对我有用
这也适用于指定其他参数，例如 width 或 height ..

【解决方案16】：

您可能会发现遵循类似于reference links in 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

【讨论】：

【解决方案17】：

如果图片有括号则不会显示

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

重命名图像并删除括号

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

更新：如果文件路径中有空格，您也应该考虑重命名它，或者如果您使用 JavaScript，则可以使用对其进行编码

encodeURIComponent(imagePath)

另外，请始终尝试以小写形式保存图像和文件，请养成这种习惯，不过只是我个人的看法

【讨论】：

【解决方案18】：

基本语法是![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 notebook 中使用 markdown 时遇到问题。

【讨论】：

【解决方案19】：

这在 ubuntu 中对我有用：

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

Markdown 文件在：

/home/gps/Documents/Markdown/

图片文件在：

/home/gps/Pictures/

【讨论】：