通過jsDelivr + github 搭建一個簡易圖床


應用場景:

在大型項目里需要很多圖片時,不會直接把圖片存儲在項目文件夾里,也不推薦直接用數據庫存儲,而是用第三方存儲,cdn,也可以自己搭個存儲圖片的服務器,等等方式,如果時自己練練手,做做博客,寫寫小項目,就可以用 jsDelivr + github 的方式把圖片先存儲在github的倉庫里,然后再用jsDelivr的git鏈接調用圖片即可,很方便,當然,如果有條件可以使用其他更好的方式。

步驟:

github:

github倉庫的創建:

沒有github賬號的先注冊一個github賬號,登錄進去后,直接點擊左上角的貓頭,進入圖中界面,點擊new。

 

進到新建倉庫界面后

Repository name 填寫你給這個倉庫取的名字

Description 說明(可不填寫)

Public 是倉庫的訪問權限(公開) Private (私有)

github圖片的上傳:

新建好倉庫后,是如下圖界面,上傳圖片的實現我沒有使用命令行,而是使用的方便簡單拖拽

點擊uploading and existing file(上傳和現有文件) 進入文件上傳界面

 

進入上傳界面后,如下圖,把想要的圖片拖入指示處,等待文件上傳,上傳完成后點擊Commit changes(提交更改)

 

Commif changes成功后,再次點擊左上角的貓頭,左側會有你的倉庫,點擊剛才創建的倉庫,進入就會看見你剛才上傳的文件

倉庫版本的設置:

接着上一步(進入新建的倉庫)

點擊releases(發布)

 

進入發布界面后

點擊中央的 Create a new release(創建新版本)后進入發布界面,如下圖

指示處 填寫版本號

點擊底部按鈕 Publish release(發布)

 

最后再回到自己倉庫,輸入框里填寫 上一步設置的版本號,然后點擊箭頭指示處

jsDelivr:

進入jsDelivr:

點擊 https://www.jsdelivr.com/ 進入jsDelivr首頁面

點擊 GitHub

直接復制指示鏈接

jsDelivr的GitHub第一條鏈接參數:

user : github用戶名

repo : 存儲需要訪問資源的倉庫名

version :版本號

填好相應的參數后,復制到地址欄訪問,如果進入了如下圖界面,則成功

圖片資源的調用:

箭頭處是你訪問倉庫的資源文件夾,在你的項目中需要的圖片可以直接用jsDelivr鏈接調用

找到你需要的圖片,點擊進入查看,復制地址欄鏈接,粘貼到你的src就行了

結尾:

通過這種方式調用自己的資源還是挺好用的,不過,也不是任何場景都適合使用這種方式,要活學活用。

謝謝觀看

 


免責聲明!

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



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