Image 如何在标记中显示本地图像？

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

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

---

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

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

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

---

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

另一种不显示本地图像的可能性是图像引用的无意缩进，

前面的空格！[alt text]（文件）

---

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

要在标记文件中添加图像，.md文件和图像应位于同一目录中。在我的例子中，我的.md文件位于doc文件夹中，因此我也将图像移动到了同一文件夹中。然后在.md文件中编写以下语法

![alt text](filename)

就像

！[汽车图像]（Car.png）

---

这对我很有用。

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

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

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

images_folder/img.jpg  < works


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

images\u文件夹/img.jpg

---

使用绝对路径，只能使用如下url访问图像：

将图像放在与标记文件相同的文件夹中，或者使用图像的相对路径。

我得到了一个解决方案：

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

！[图片信息](file:///.jpg “图像描述”）
![图片信息](file:///C:/Users//Pictures/.jpg “图像描述”）

---

TurboByte

以下操作使用文档旁边子文件夹中图像的相对路径：

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

---

添加一个本地图像对我很有用，就像这样：

！[替换文本](file://IMG_20181123_115829.jpg)

如果没有

文件：//

前缀，它就无法工作（Win10，带有MarkdownViewer++插件的记事本+）

编辑：我发现它也适用于html标记，这是更好的方式：

---

Edit2：在Atom编辑器中，它只在没有

文件：//

前缀的情况下工作。真是一团糟。

我在R Markdown中插入图像时遇到问题。如果我做了整个URL:

C:/Users/Me/Desktop/Project/images/image.png

，它就会正常工作。否则，我必须将标记放在与图像相同的目录中，或者放在它的祖先目录中。引用映像时，似乎忽略了声明的编织目录。

类Unix操作系统的解决方案。 一步一步地：

创建一个名为like

Images

的目录，并放置将通过标记呈现的所有图像

例如，将

example.png

放入

图像中

加载以前位于

Images

目录下的

example.png

注意：

图像

目录必须位于扩展名为

.md

的标记文本文件的同一目录下。

编辑：

为我工作（为了本地形象） 标记文件README.md与doc目录处于同一级别

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

为我工作（带有原始路径的绝对url） 不适用于我（带有blob路径的url）

---

据我所知，对于Linux上的VSCode，只有当您将图像放入与

.md

post文件相同的文件夹中时，本地图像才能正常显示。
i、 e.仅限<代码>！[]（image.jpg）或

！[]（./image.jpg）

将起作用。

---

甚至像

这样的绝对路径！[]（/home/bala/image.jpg）

也不起作用。

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

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

在中，您可以使用

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

---

根据您的工具，您还可以将HTML注入标记中

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

---

您可能会发现以下语法与handy类似，尤其是当您的文本具有相同图像的多个显示时：

![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)

更新： 如果在文件路径中有空格，则应该考虑重命名它，或者如果使用JavaScript，可以使用

对其进行编码。

encodeURIComponent(imagePath)

---

此外，始终尝试使用小写字母保存图像和文件，请养成这种习惯，这只是我个人的看法，尽管基本语法是

！[图像描述]（任意您选择的图像.png“title”）

。在我的例子中，我在

中使用了图像名称作为
Any\image\of\your\choice.png
！[Image description]（Any\Image\of\your\choice.png）

而不是

！[图像描述]（任意您选择的图像.png）

但它不起作用。因此，我想说的是，确保检查图像目录，并且图像名称不包含空格，如果是，请使用下划线（

\uu

）而不是空格

---

在Ubuntu18.04的Jupyter笔记本中使用markdown时遇到问题。

标题是什么？@niCkcAMel“Title”是将鼠标悬停在图像上时显示的内容。如果图像无法显示，则会显示“alt text”。尝试将图像放在同一个文件中：这应该是文件-->文件夹吗？最好的答案是，以所需的方式使用GitHub标记文件。最好的答案！最佳答案，在jupyter工作

！[图像信息]（pictures/image.png）

同样有效。这不提供问题的答案。你可以，或者

![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)

encodeURIComponent(imagePath)