github用相对路径显示图片_【图文详解】如何利用Github在Markdown中插入图片？

最近尝试用利用Github在Markdown中插入图片，遇到诸多问题——主要是不知道如何用GitHub上传图片！

GitHub是一个纯英文网站，网上目前有的教程又都较为简略，一般只有文字说明。但缺乏图片的详细说明，作为非常白的非程序员，完全看不懂啊！

在多次努力终于弄明白如何利用GitHub在Markdown中插入图片后，我把自己摸索的方法做成了一个图文并茂的教程，希望能对大家有所帮助！

PS：简书上的图片插入程序很好用，不需要采用此笨拙的图片插入方法！

为何要用Github上传图片?

Markdown语法插入图片，主要有三种方式：

1 .插入网络图片

只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。

Markdown语法：![text] (图片链接地址)

(text为用来描述图片的关键词，可以不写。)

2. 插入本地图片

只需要在基础语法的括号中填入图片的位置路径即可。

Markdown语法：! [text ] ( /user/desktop/doge.png)

本地图片的路径，一旦更改或丢失，都会造成markdown文件调不出图，因此不推荐此方法！

3.把图片存入markdown文件

用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。

作为非程序员，此方法描述都让人头大，难度较大！感兴趣者可参考：把图片存入markdown文件

综上所述，通过图片地址的方式，在Markdown中插入图片，是最为合适的方法。当前，有很多小网页工具帮助把上传图片并提供图片链接，比如：https://sm.ms/。相比于GitHub，此类工具可能不稳定。

因此，本文认为利用GitHub上传图片，并在Markdown中插入是较为稳妥和方便的方法！

如何用Github上传图片?

使用GitHub上传图片，主要分为4步：

先注册一个github的帐号

创建一个仓库

上传一张图片

上传完成后，点击打开图片，右键复制图片地址

1. 先注册一个github的帐号

点击右上角Sign up (注册)，输入

Username(用户名)

Email(邮箱)

Password(密码)，

最后，点击Sigh up for Github完成注册。

注册账号

如果已有GitHub账户，则直接点击Sigh in (登录)即可。

2. 创建一个仓库

登录进入后，点击 New repository，创建一个新的仓库

repository：仓库

** 输入仓库名称，点击 Create Repository ,

创建仓库

仓库创建完成后，进入README,不用填写任何内容，直接点击Commit new file(提交文件)。

PS: 第一次创建仓库后，花了很久才弄明白如何才能有上传文件的命令——问题就在这里，需要点击README，并且Commit new file。作为一个GitHub小白，其实我不明白为什么需要有这一步，才能继续操作。。)

创建好的仓库.jpg

执行README

3. 上传一张图片

完成以上步骤后，就可以点击 Choose your files(上传文件)，并选择需要上传的图片，上传过程需等待几秒钟。

最后，点击Commit changes(提交)，图片就上传完成啦！

上传图片

4. 上传完成后，点击打开图片，右键复制图片地址。

复制地址

以上，就是利用Github在Markdown中插入图片的全部过程，希望能帮到你！

github用相对路径显示图片_【图文详解】如何利用Github在Markdown中插入图片？相关推荐

python pdf删除图片_使用PyMuPdf提取、删除及替换PDF中的图片文件
有时候想把PDF中的图片文件提取出来,身为程序员的我当然是自己写段代码来实现,先看看了网上的方法,都是逐行遍历,正则匹配来提取什么的,其实没有那么复杂,PyMuPdf官方文档里自带就有提取图片文件的方 ...
前端中全部盒子靠左对齐_图文详解ul中li内容垂直居中和水平居中的方法
在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中.感兴趣的朋友继续往下看吧. ...
html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
pe系统如何读取手机_图文详解怎么用pe重做系统
上期小编讲解了小编教你笔记本电脑开不了机怎么办,本次正特手机网小编给大家讲解一下图文详解怎么用pe重做系统,最近有不少的小伙伴都问小编说,使用pe重做系统简单吗?对于大家提问pe重做电脑系统的问题,其 ...
win10你的电脑设备需要修复_图文详解win10升级失败的解决方法
最近有小伙伴在后台留言称自己的win10系统最近总是更新升级失败,想问一下有没有解决该问题的方法.方法当然是有的,小编将该问题的解决方法整理出了详细的图文步骤教程,遇到该问题的小伙伴们快来学习一下吧. ...
Python办公自动化实战 05 | Python-docx库：Python与Word的完美结合_ 利用代码实现Word中插入图片
一.专题内容简介本专题主要介绍Python针对Word办公自动化如何利用Python代码动态向Word中插入图片.并且对格式做简单设定. 二.专题案例效果最终运行效果如下: 三.专题代码实现 3 ...
如何在Markdown中插入图片并顺利共享
使用PicGo+GitHub搭建图床–实现便捷的Markdown图片管理昨天在呕心沥血写(搬)完我的第一篇技术分享博文m1 使用 VMware 安装 CentOS7 并部署 k8s 高可用集群之后, ...
Markdown中插入图片
前言: 企业中产品手册少不了图片的插入,那如果用markdown维护手册的话,怎么插入图片呢?今天介绍以下几种方法: (一)插入本地图片 (二)插入网络图片 (一)插入本地图片只需要在基础语法的括号 ...
Markdown中插入图片及图注
<center><img style="border-radius: 0.3125em;box-shadow: 0 2px 4px 0 rgba(34,36,38,.12) ...

github用相对路径显示图片_【图文详解】如何利用Github在Markdown中插入图片？

github用相对路径显示图片_【图文详解】如何利用Github在Markdown中插入图片？相关推荐

最新文章

热门文章