一、将图片内嵌到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

关于markdown图片显示相关推荐

  1. r语言remarkdown展示图_解决R markdown 图片显示不完整

    R markdown功能多多 可以用网页HTML.PDF.Word等多种展示方式.做presentation非常有用,文件小,内容大.最近我想做一个R Markdown写一些作用,然后发现R Mark ...

  2. 让自己写的电子笔记连文带图全平台兼容(MarkDown图片显示兼容)

    文章目录 一.工具使用 语言使用:MarkDown 简介 使用原因 使用方法 软件使用:Typora 简介 环境设置搭建 1)搭建图床 2)配置PicGo 3)配置typora 4)测试 图片上传测试 ...

  3. Markdown——图片、文字显示居中的一种方法

    Markdown--图片.文字显示居中的一种方法 一.方法 1.1 图片居中 1.2 文字居中 二.图片居中举例 2.1 编辑界面 2.2 显示界面 一.方法 1.1 图片居中 在图片下面的链接的最后 ...

  4. VSCode中Markdown 无法显示图片

    前人总结了几个 Markdown 无法显示图片的原因和处理办法: [问题篇]VScode中markdown不能显示预览图片_酸梅果茶的博客-CSDN博客_vscode查看markdown图片[问题篇] ...

  5. VSCode中MarkDown图片无法显示

    VSCode中MarkDown图片无法显示 这是由于 VSCode 中MarkDown默认配置中只允许载入安全内容,更改设置即可. 在MarkDown文件中输入快捷键 Ctrl + Shift + P ...

  6. Github 无法显示markdown图片

    问题: 上传 md 文件到 Github 图片无法显示,引用格式为 '![Title](./images/Title.png'. 同时Github 上 F12 显示 raw.githubusercon ...

  7. Markdown 图片助手-MarkdownPicPicker

    Markdown 图片助手-MarkdownPicPicker title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 ...

  8. markdown 图片居中_Markdown常用语法汇总

    一.Markdown简介 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档. Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建. ...

  9. markdown 图片居中_Markdown入门指南【我为什么要推荐你学习Markdown?】

    〇.前言 转载请注明原作者和地址,如果这篇文章对你有帮助或启发,也可以请我喝个咖啡.奶茶. 一.啥是Markdown Markdown 是一种可以使用普通文本编辑器编写的轻量级标记语言,通过简单的标记 ...

最新文章

  1. 2017.4.24 js 中的iscroll
  2. php中public放什么,PHP中常用关键字public, private, protected, static...
  3. python3.5安装pygame_安装pygame for Python3.5
  4. include指令与动作的区别【贴心,简洁】
  5. oracle connection 有时能取到有时候又取不到
  6. XCTF-MISC-新手区-gif
  7. java main 如何不退出_为什么java main主线程退出了子线程还能运行;golang main结束所有协程都被结束了...
  8. java修改异常状态码_RxJava2 + Retrofit2 完全指南 之 统一状态码/Exception处理
  9. C#基础11:五种访问修饰符
  10. [转]整理关于java的String 类,equals函数和比较操作符的区别
  11. TV TimeShift和PVR的区别
  12. Chromeedge好用扩展插件分享
  13. Matlab mapminmax函数使用及原理
  14. 【CodeVS 1222】信与信封的问题 随机化+treat Hungery
  15. MFC自绘带背景颜色标题栏
  16. html母亲节主题网页源码jd
  17. html5indexeddb排序,html5的indexedDB数据库操作实例
  18. 8万字智慧旅游景区信息化建设方案word
  19. rt-thread SAL嵌套字抽象层
  20. Android 错误总结

热门文章

  1. 省市县结合身份证号6位码的三级联动
  2. 高中数学必修2试题:直线平面平行的判定及其性质
  3. 请输入星期几的第一个字母来判断一下是星期几
  4. 软件测试面试题:优惠券发布后测试场景图和设计?
  5. Object Detection with Discriminatively Trained Part-Based Models
  6. 为iPhone日历添加天气和农历
  7. 用AOMEI Partition Assistant制作PE 启动盘
  8. 手机网络邻居访问电脑_不是一个局域网手机怎么访问电脑
  9. 面部微雕做了以后有危害吗,自体脂肪填充苹果肌硬块多久消,姐姐聚会那些事
  10. 国际志愿者日 我们与爱同行