美文网首页
【图文详解】如何利用Github在Markdown中插入图片?

【图文详解】如何利用Github在Markdown中插入图片?

作者: 李呦呦007 | 来源:发表于2018-07-28 23:37 被阅读0次

    最近尝试用利用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步:

    1. 先注册一个github的帐号
    2. 创建一个仓库
    3. 上传一张图片
    4. 上传完成后,点击打开图片,右键 复制图片地址

    1. 先注册一个github的帐号

    • 打开GitHub网站:https://github.com/

    • 点击右上角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. 上传完成后,点击打开图片,右键 复制图片地址。

    复制地址

    最后,将图片地址 粘贴至Markdown语法中,就成功的完成了图片插入!
    比如: !(https://github.com/youyou-579/123/blob/master/2.8.jpg?raw=true)

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

    相关文章

      网友评论

          本文标题:【图文详解】如何利用Github在Markdown中插入图片?

          本文链接:https://www.haomeiwen.com/subject/mnnomftx.html