MarkDown中添加圖片的三種方式


基礎格式

插入圖片最基礎的格式就是:

  • ![Alt text](圖片鏈接 "optional title")

Alt text:圖片的Alt標簽,用來描述圖片的關鍵詞,可以不寫。最初的本意是當圖片因為某種原因不能被顯示時而出現的替代文字,后來又被用於SEO,可以方便搜索引擎根據Alt text里面的關鍵詞搜索到圖片。 圖片鏈接:可以是圖片的本地地址或者是網址。"optional title":鼠標懸置於圖片上會出現的標題文字,可以不寫。

插入本地圖片

只需要在基礎語法的括號中填入圖片的位置路徑即可,支持絕對路徑和相對路徑。
例如:

  • ![avatar](/home/picture/1.png)

不靈活不好分享,本地圖片的路徑更改或丟失都會造成markdown文件調不出圖。

插入網絡圖片

只需要在基礎語法的括號中填入圖片的網絡鏈接即可,現在已經有很多免費/收費圖床和方便傳圖的小工具可選。
例如:

將圖片存在網絡服務器上,非常依賴網絡。

把圖片存入Markdown文件

用base64轉碼工具把圖片轉成一段字符串,然后把字符串填到基礎格式中鏈接的那個位置。

基礎用法

例如:

  • ![avatar](data:image/png;base64,iVBORw0......)
    這個時候會發現插入的這一長串字符串會把整個文章分割開,非常影響編寫文章時的體驗。如果能夠把大段的base64字符串放在文章末尾,然后在文章中通過一個id來調用,文章就不會被分割的這么亂了。

高級用法

例如:

  • ![avatar][base64str]
  • [base64str]:data:image/png;base64,iVBORw0......

base64的圖片編碼的來源

使用軟件

可通過在網上搜索“圖片BASE64轉換工具”,下載圖片BASE64轉換工具的綠色軟件

使用python

import base64
f=open('723.png','rb') #二進制方式打開圖文件
ls_f=base64.b64encode(f.read()) #讀取文件內容,轉換為base64編碼
f.close()
print(ls_f)

原文鏈接:https://www.jianshu.com/p/280c6a6f2594,有更改


免責聲明!

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



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