應用場景:
在大型項目里需要很多圖片時,不會直接把圖片存儲在項目文件夾里,也不推薦直接用數據庫存儲,而是用第三方存儲,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就行了
結尾:
通過這種方式調用自己的資源還是挺好用的,不過,也不是任何場景都適合使用這種方式,要活學活用。
謝謝觀看