哈嘍贬丛，大家好！我是「勵(lì)志前端小黑哥」给涕，我?guī)е钚掳l(fā)布的文章又來了豺憔！
專注前端領(lǐng)域10年+，專門分享那些沒用的前端知識够庙！
今天要分享的內(nèi)容恭应，是教大家白嫖npm倉庫，得到一個(gè)免費(fèi)的圖床耘眨，作為自己的一個(gè)云端文件存儲昼榛。
前言
在互聯(lián)網(wǎng)上，分享和展示圖片是常見的需求剔难，但很多免費(fèi)的圖床服務(wù)要么有廣告干擾胆屿，要么有存儲限制。今天钥飞，我將向大家展示一種巧妙的辦法莺掠，通過npm（Node Package Manager）倉庫來實(shí)現(xiàn)一個(gè)真正個(gè)人的免費(fèi)圖床。
這種方法的核心思想是將圖片文件偽裝成文本文件上傳至npm读宙，然后通過npm的公開訪問功能獲取圖片的URL彻秆。
操作步驟
1. 新建一個(gè)npm包目錄，存放你的圖片
首先，新建一個(gè)目錄唇兑，我這里建的目錄叫pic-npm酒朵，然后在目錄內(nèi)執(zhí)行命令行npm init可快速生成一個(gè)npm包目錄。如下：
期間會詢問你一些問題扎附，報(bào)名蔫耽、版本、倉庫啥的留夜，你不用管匙铡，一路按回車就行。
2. 修改圖片的后綴名為txt
找到你想要上傳的圖片文件碍粥，放到目錄中去鳖眼，例如example.png。為了繞過npm對文件類型的限制嚼摩，我們需要將圖片的后綴名修改為.txt钦讳，但保留原始的圖片內(nèi)容。
這聽起來有些奇怪枕面，但npm并不檢查文件內(nèi)容愿卒，只根據(jù)文件擴(kuò)展名來決定如何處理文件。因此潮秘，將example.png重命名為example.png.txt琼开。
我這里保留了兩張圖，一張?jiān)瓐D唇跨、一張修改后綴的圖稠通，方便做對比。
3. 上傳npm包
接下來买猖，你需要一個(gè)npm賬戶（如果還沒有，可以去npm官網(wǎng)注冊一個(gè)）滋尉。
之后玉控，你可以使用npm publish命令將這個(gè)包發(fā)布到npm倉庫。請注意狮惜，npm包名必須是全局唯一的高诺，因此在發(fā)布之前，你可能需要檢查并選擇一個(gè)未被占用的包名碾篡。
可以看到虱而，上面圖上這個(gè)情況就說明包名被別人占用了，所以我們得改個(gè)名字开泽。
包名在哪改呢牡拇？
很簡單，在package.json文件中改。
我這里只加了個(gè)后綴惠呼。
接著繼續(xù)執(zhí)行npm publish就可以發(fā)布了导俘！
4. 訪問npm官網(wǎng)，訪問Code菜單
發(fā)布成功后剔蹋，你可以登錄npm官網(wǎng)旅薄，搜索你剛發(fā)布的包名，找到你的包泣崩∩倭海或者直接訪問路徑：https://www.npmjs.com/package/你的包名
我這里的路徑如下：https://www.npmjs.com/package/pic-npm-xiaohei
進(jìn)入包的詳情頁后，點(diǎn)擊左側(cè)的Code菜單項(xiàng)矫付。這里會顯示你包的所有文件和目錄結(jié)構(gòu)猎莲。
5. 打開調(diào)試窗口，抓取這個(gè)文件的訪問鏈接
為了獲取URL技即，你可以打開瀏覽器的開發(fā)者工具（通持荩可以通過按F12或右鍵點(diǎn)擊頁面選擇“檢查”來打開）。
找到“網(wǎng)絡(luò)”（Network）標(biāo)簽頁而叼，然后點(diǎn)擊文件身笤。
點(diǎn)擊后，網(wǎng)絡(luò)標(biāo)簽頁內(nèi)葵陵，會多出一個(gè)鏈接液荸。
找到這個(gè)鏈接，右鍵點(diǎn)擊這條記錄脱篙，選擇“復(fù)制” > “復(fù)制網(wǎng)址”娇钱，這樣你就得到了這個(gè)文件的直接訪問URL。
6. 將這個(gè)鏈接寫入你的readme文件即可
最后一步绊困，在任何一個(gè)Markdown文件中文搂，你可以使用Markdown語法插入這個(gè)圖片，將之前復(fù)制的URL作為圖片的src屬性秤朗。
例如煤蹭，本篇文章使用的示例：
https://www.npmjs.com/package/pic-npm-xiaohei/file/b6cc3418ebac938dc2d179645fbf5a62bb1d0b56d0169a6be2f52d9b30c9a894
最終的效果預(yù)覽圖
請注意，由于我們實(shí)際上是將圖片作為文本文件上傳的取视，直接訪問這個(gè)URL時(shí)硝皂，瀏覽器可能會嘗試以文本形式顯示它。
但在Markdown中作谭，由于我們指定了它是一個(gè)圖片（通過![]()語法）稽物，瀏覽器會正確地將其作為圖片處理。
至此折欠，你已經(jīng)成功地將npm倉庫當(dāng)作了一個(gè)免費(fèi)的圖床贝或，并且完全繞過了npm對文件類型的限制吼过。
結(jié)語
這種方法雖然有些“取巧”，但確實(shí)是一種實(shí)現(xiàn)個(gè)人免費(fèi)圖床的有效手段傀缩。不過那先，請確保你上傳的內(nèi)容符合npm的社區(qū)準(zhǔn)則和法律法規(guī)，避免造成不必要的麻煩赡艰。
這種方法能夠有效節(jié)省本地存儲空間售淡，讓圖片管理更加便捷高效。它能很方便的對圖片進(jìn)行分享與傳播慷垮，只需生成鏈接或嵌入代碼揖闸，即可輕松實(shí)現(xiàn)跨平臺共享。
PS：文章看完了料身，如果本文對你有所幫助汤纸，請點(diǎn)贊、收藏芹血，這樣能讓更多人知道贮泞！
勵(lì)志前端小黑哥，全網(wǎng)唯一賬號幔烛！
關(guān)注我啃擦，帶你了解更多前端知識！
