关于markdown图片显示

 

一、将图片内嵌到md文档中

将图片嵌入Markdown文档中一直是一个比较麻烦的事情。通常的做法是将图片存入本地某个路径或者网络存储空间，使用URL链接的形式插入图片：

![image][url_to_image]

 

这样做一个明显的麻烦之处在于处理图片与Markdown文档的一致性上。如果我们要拷贝文档，或者图片遭到误删/云端链接失效，就会变得不便。最让我们省心的方法便是将图片直接放到文档内部。

一个将图片嵌入文档中的方法是使用base64编码。步骤比较简单：
1. 将图片或截图保存在本地；
2. 使用在线工具将图片转码至base64编码；
3. 在文档中插入编码：

![image][data:image/png;base64, ......]

 

当然base64编码一般很长，直接将编码放入段落内部会影响正常编辑。通常的做法是将base64编码定义到一个中间变量中，将编码本体放到文档末：

 

[tmp]:data:image/png;base64, ......
your document here ...

[tmp]:data:image/png;base64, ......

 

使用该技巧的时候需要注意，并不是所有的Markdown编辑器都支持这种方法。而且一些Markdown编辑器只支持特定的图片格式。如有道云笔记只支持png格式的图片编码。需要在保存图片文件的时候加以注意。
 

 

二、将图片保存在本地

如果你的markdown在一个文件目录下，需要添加另一个目录下的图片，绝对路径是不可行的。需要 “迂回”
所谓 迂回，即需要先用../../命令返回上一文件目录，直至可以顺利找到要添加图片的目录。

举个栗子

比如你的markdown在

~/Document/mymarkdown/test

下，需要添加

~/Downloads/Pic/background

目录下的

sunlight.jpg

你需要做的是

![](../../../Downloads/Pic/background/sunlight.jpg)

 

 三、将图片放到网上

README文件后缀名为md。md是markdown的缩写，markdown是一种编辑博客的语言。格式如下：

![](img_url)

即 叹号! + 方括号[ ] + 括号( ) 其中叹号里是图片的URL。

如果不加叹号! ,就会变成普通文本baidu了。

在方括号里可以加入一些 标识性的信息，比如

![描述](https://github.com/foolish1016/MoreView/blob/master/MoreBtn/Preview/7A33E4FC-D15F-4FA2-99D4-371FA7C8DEAA.png)

这里可以将截图放到项目中，然后一并上传到github上，这样就可以取到图片的连接。

 

*自己发现一个比较简单的方式

打开csdn博客 --> 写文章 --> 选择markdown编辑器

将图片直接从本地或者网页上复制到这里，直接复制下面的链接就可以粘贴到自己所写的md文章内

可以在预览中看到已经有图片，这时候把csdn的编辑的删了就行了。。。亲测可用
 

 

 

参考链接：https://blog.csdn.net/u010158659/article/details/61197893

https://www.cnblogs.com/pualus/p/8884080.html

https://www.jianshu.com/p/c7e9e5771098