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的圖片編碼如何得來?

  1. 使用python將圖片轉化為base64字符串
import base64
f=open('723.png','rb') #二進制方式打開圖文件
ls_f=base64.b64encode(f.read()) #讀取文件內容,轉換為base64編碼
f.close()
print(ls_f)
  1. base64字符串轉化為圖片
import base64
bs='iVBORw0KGgoAAAANSUhEUg....' # 太長了省略
imgdata=base64.b64decode(bs)
file=open('2.jpg','wb')
file.write(imgdata)
file.close()

 

作者:一夢七年詩
鏈接:https://www.jianshu.com/p/280c6a6f2594
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並注明出處。


免責聲明!

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



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