Markdown文件(md格式)上傳到GitHub之后,圖片不顯示了?Typora+Github+PicGo實現自動上傳圖片


目錄

Created by gh-md-toc


一、md文件上傳到GitHub之后,圖片不顯示了?
1.1 原因
  1. Markdown文件上傳到Github,或者把含有圖片的md文件傳給其他人。

  2. Typora寫的md文件中的圖片都是另外存儲的,不像word軟件是存放到word文件里的。

比如:我在文件里面放了下面一張圖片(雷神),但把markdown文件發給朋友的時候,圖片就不能顯示了。。。。。

20200314211822

解決辦法:

  • 方法1:轉成Word格式或者PDF格式之類的

  • 方法2:把圖片和md文件一起打包,再進行分享

  • 方法3:全部圖片上傳到Github服務器上,直接發md文件,但朋友需要聯網打開,才能看到圖片。 說明:Github服務器,是免費的,但對於新手來說,剛開始使用會覺得很痛苦!

1.2 技術介紹
  • Tyora: 一個所見即所得的Markdown格式文本編輯器,支持Windows、macOS和GNU/Linux操作系統,包括對GitHub Flavored Markdown擴展格式的支持、拼寫檢查、自定義CSS樣式、數學公式渲染(通過MathJax)等特性。

  • PicGo(圖床工具的其中之一): 自動把本地圖片轉換成鏈接的一款工具。支持微博,七牛雲,騰訊雲COS,又拍雲,GitHub,阿里雲OSS,SM.MS,imgur 等8種常用圖床,功能強大,簡單易用

  • GitHub: 簡而言之,它就是存放代碼、圖片等資源的平台。 【官話:GitHub是一個面向開源及私有軟件項目的托管平台,因為只支持git 作為唯一的版本庫格式進行托管,故名GitHub。】

二、解決方案
2.1 方案一:存儲到本地(不適合小編寫文章)

優點

  • 配置簡單,免費

缺點

  • 文件分享麻煩,上傳到博客導致圖片找不到等問題。

設置如下,每次傳md文件給其他人的時候,需要把圖片文件夾也一並壓縮轉發才行,記住勾選“優先使用相對路徑”

20200314211823

2.2 方案二:Tyora+PicGo+GitHub(實現免費圖片服務器)

優點

  • 免費

  • 搭建圖床並自動上傳(適合小編寫文章)

缺點

  • 配置復雜

  • 查看文件需要聯網(圖片全都是放到GitHub上的)

  • 文件中的圖片加載速度,取決於本機的網速

  • Tyora和PicGo這項功能是2020年最近才有的,還存在不少的問題。

所謂圖床工具,就是自動把本地圖片轉換成鏈接的一款工具,網絡上有很多圖床工具,就目前使用種類而言,PicGo 算得上一款比較優秀的圖床工具。它是一款用 Electron-vue 開發的軟件,可以支持微博,七牛雲,騰訊雲COS,又拍雲,GitHub,阿里雲OSS,SM.MS,imgur 等8種常用圖床,功能強大,簡單易用。

Typora要更新到最新版本,PicGo也要最新版【只有最近幾個版本,才支持自動上傳】

步驟一:創建GitHub賬號和倉庫

創建賬號:https://blog.csdn.net/qq_43571415/article/details/100050781

創建倉庫(很詳細,記得另外保存好token值):

https://blog.csdn.net/acmman/article/details/77621253

說明:

  1. 創建的倉庫可以是自己寫的Github文章的倉庫

  2. 第一次創建倉庫步驟很繁瑣,以后就不會了。也勸大家不要自己去找教程,這類的資料很雜,很多都不全,這樣對於小白更加痛苦!

步驟二:下載安裝Picgo(2.2.0以上的版本),Typora最新版

Picgo 2.2.2版本,下載鏈接:https://www.lanzous.com/ia49ojg

Typora 0.9.86 beta下載鏈接:https://www.lanzous.com/ia49pgj

Picgo設置步驟(很坑,所以步驟我自己寫吧):

①右擊,打開詳細窗口

20200314211825

②設置圖床

20200314211826

配置以下內容

  • 設定倉庫名:用戶名/倉庫名

  • 設定分支名:這里寫入分支名稱,一般直接用maser即可。

  • 設定Token(任意一個令牌都可以):在 GitHub 上生成一個 token 以便 PicGo 來操作我們的倉庫,來到個人中心,選擇 Developer settings 就能看到 Personal access tokens,我們在這里創建需要的 token 20200314211827

    點擊 Generate new token 創建一個新 token,選擇 repo,同時它會把包含其中的都會勾選上,我們勾選這些就可以了。然后拉到最下方點擊綠色按鈕,Generate token 即可。之后就會生成一個 token ,記得復制保存到其他地方,這個 token 只顯示一次!!

20200314211828

  • 指定存儲路徑:一般寫/img,會在設定的倉庫中創建img文件夾,也可以取另外的名字。

  • 設定自定義域名(很坑):格式(https://raw.githubusercontent.com/Github用戶名/倉庫名/分支名) raw.githubusercontent.com:固定的,不要修改 Github用戶名:自己創建的Github登錄用戶名,不是昵稱哦! 倉庫名:上面創建的倉庫名(盡量不要有中文符,或者特殊符號) 分支名:如果前面設定的分支名是master,這里也寫master。

③手動上傳測試(先確保能上傳,再配置Typora)

有時候可能會上傳不上,重啟PicGo就可以了

20200314211829

上傳成功!

20200314211830

如果上傳不成功?

  • 倉庫名有特殊符號?上傳文件有特殊符號?或者有空格之類的? 建議全部改成英文。【GitHub中空格是用下划線來表示,_】

  • token值不對? 解決:重新復制粘貼一下,或者重新創一個新的token。

  • 自定義域名是否正確? 解決:按照上面的步驟,仔細觀察書寫格式。

Typora自動上傳設置:

20200314220033

單擊“驗證圖片上傳選項”

可以由下圖獲得PicGo需要設置的信息(記住,待會要用):

  • 需要監聽的地址:127.0.0.1

  • 需要監聽的端口:36677

20200314220026

PicGo設置Server

20200314220019

image-20200315034829529

上傳所有本地文件(單文件):它會把文件中用到的圖片重新上傳一次,路徑也改變一次。

20200314212238

三、常遇到的問題
3.1 如果上傳不成功?
  • PicGo可能自己改了Server端口號? 解決:把它改過來,這個可能是個bug(畢竟是最新版,問題肯定會有的)

  • PicGo報錯了? 解決:關掉PicGo,等一會,再啟動。再等一會,最后上傳圖片。

  •  20200314231903

3.2 上傳成功了,圖片顯示出來了,但重新打開后,又不顯示了?

解決:

  1. 應該是網速的原因,稍微等一下,或者做一下別的事情,過一會它就顯示了。(時間有可能很長!)

3.3 如何想要轉移圖集?重新轉移動新的GitHub倉庫?

解決:

  1. 把圖片搜集到本地,再一個一個重新上傳到新倉庫(最老土的方法)

  2. 下載GitHub之前倉庫的圖集,復制到新的倉庫中。打開md文件,按ctrl+F,替換全部路徑的倉庫名。







作者:“時間的塵埃

文章原GitHub賬號昵稱:“時間的塵埃

GitHub文章鏈接:Typora圖片找不到的問題

轉載自博客園“時間的塵埃”字樣,以尊重作者的勞動成果。版權歸原作者所有。

未經允許,嚴禁轉載。對非法轉載者,作者保留采用法律手段追究的權利。

第三條本網站之聲明以及其修改權、更新權及最終解釋權均屬“時間的塵埃”, 以上聲明的解釋權歸“時間的塵埃”所有。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM