哈嘍，大家好！我是「勵志前端小黑哥」，我?guī)е钚掳l(fā)布的文章又來了！
專注前端領域10年+，專門分享那些沒用的前端知識！
今天要分享的內容，是教大家白嫖npm倉庫，得到一個免費的圖床，作為自己的一個云端文件存儲。
前言
在互聯(lián)網(wǎng)上，分享和展示圖片是常見的需求，但很多免費的圖床服務要么有廣告干擾，要么有存儲限制。今天，我將向大家展示一種巧妙的辦法，通過npm（Node Package Manager）倉庫來實現(xiàn)一個真正個人的免費圖床。
這種方法的核心思想是將圖片文件偽裝成文本文件上傳至npm，然后通過npm的公開訪問功能獲取圖片的URL。
操作步驟
1. 新建一個npm包目錄，存放你的圖片
首先，新建一個目錄，我這里建的目錄叫pic-npm，然后在目錄內執(zhí)行命令行npm init可快速生成一個npm包目錄。如下：
期間會詢問你一些問題，報名、版本、倉庫啥的，你不用管，一路按回車就行。
2. 修改圖片的后綴名為txt
找到你想要上傳的圖片文件，放到目錄中去，例如example.png。為了繞過npm對文件類型的限制，我們需要將圖片的后綴名修改為.txt，但保留原始的圖片內容。
這聽起來有些奇怪，但npm并不檢查文件內容，只根據(jù)文件擴展名來決定如何處理文件。因此，將example.png重命名為example.png.txt。
我這里保留了兩張圖，一張原圖、一張修改后綴的圖，方便做對比。
3. 上傳npm包
接下來，你需要一個npm賬戶（如果還沒有，可以去npm官網(wǎng)注冊一個）。
之后，你可以使用npm publish命令將這個包發(fā)布到npm倉庫。請注意，npm包名必須是全局唯一的，因此在發(fā)布之前，你可能需要檢查并選擇一個未被占用的包名。
可以看到，上面圖上這個情況就說明包名被別人占用了，所以我們得改個名字。
包名在哪改呢？
很簡單，在package.json文件中改。
我這里只加了個后綴。
接著繼續(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
進入包的詳情頁后，點擊左側的Code菜單項。這里會顯示你包的所有文件和目錄結構。
5. 打開調試窗口，抓取這個文件的訪問鏈接
為了獲取URL，你可以打開瀏覽器的開發(fā)者工具（通常可以通過按F12或右鍵點擊頁面選擇“檢查”來打開）。
找到“網(wǎng)絡”（Network）標簽頁，然后點擊文件。
點擊后，網(wǎng)絡標簽頁內，會多出一個鏈接。
找到這個鏈接，右鍵點擊這條記錄，選擇“復制” > “復制網(wǎng)址”，這樣你就得到了這個文件的直接訪問URL。
6. 將這個鏈接寫入你的readme文件即可
最后一步，在任何一個Markdown文件中，你可以使用Markdown語法插入這個圖片，將之前復制的URL作為圖片的src屬性。
例如，本篇文章使用的示例：
https://www.npmjs.com/package/pic-npm-xiaohei/file/b6cc3418ebac938dc2d179645fbf5a62bb1d0b56d0169a6be2f52d9b30c9a894
最終的效果預覽圖
請注意，由于我們實際上是將圖片作為文本文件上傳的，直接訪問這個URL時，瀏覽器可能會嘗試以文本形式顯示它。
但在Markdown中，由于我們指定了它是一個圖片（通過![]()語法），瀏覽器會正確地將其作為圖片處理。
至此，你已經成功地將npm倉庫當作了一個免費的圖床，并且完全繞過了npm對文件類型的限制。
結語
這種方法雖然有些“取巧”，但確實是一種實現(xiàn)個人免費圖床的有效手段。不過，請確保你上傳的內容符合npm的社區(qū)準則和法律法規(guī)，避免造成不必要的麻煩。
這種方法能夠有效節(jié)省本地存儲空間，讓圖片管理更加便捷高效。它能很方便的對圖片進行分享與傳播，只需生成鏈接或嵌入代碼，即可輕松實現(xiàn)跨平臺共享。
PS：文章看完了，如果本文對你有所幫助，請點贊、收藏，這樣能讓更多人知道！
勵志前端小黑哥，全網(wǎng)唯一賬號！
關注我，帶你了解更多前端知識！
