哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！
专注前端领域10年+，专门分享那些没用的前端知识！
今天要分享的内容，是教大家白嫖npm仓库，得到一个免费的图床，作为自己的一个云端文件存储。
前言
在互联网上，分享和展示图片是常见的需求，但很多免费的图床服务要么有广告干扰，要么有存储限制。今天，我将向大家展示一种巧妙的办法，通过npm（Node Package Manager）仓库来实现一个真正个人的免费图床。
这种方法的核心思想是将图片文件伪装成文本文件上传至npm，然后通过npm的公开访问功能获取图片的URL。
操作步骤
1. 新建一个npm包目录，存放你的图片
首先，新建一个目录，我这里建的目录叫pic-npm，然后在目录内执行命令行npm init可快速生成一个npm包目录。如下：
期间会询问你一些问题，报名、版本、仓库啥的，你不用管，一路按回车就行。
2. 修改图片的后缀名为txt
找到你想要上传的图片文件，放到目录中去，例如example.png。为了绕过npm对文件类型的限制，我们需要将图片的后缀名修改为.txt，但保留原始的图片内容。
这听起来有些奇怪，但npm并不检查文件内容，只根据文件扩展名来决定如何处理文件。因此，将example.png重命名为example.png.txt。
我这里保留了两张图，一张原图、一张修改后缀的图，方便做对比。
3. 上传npm包
接下来，你需要一个npm账户（如果还没有，可以去npm官网注册一个）。
之后，你可以使用npm publish命令将这个包发布到npm仓库。请注意，npm包名必须是全局唯一的，因此在发布之前，你可能需要检查并选择一个未被占用的包名。
可以看到，上面图上这个情况就说明包名被别人占用了，所以我们得改个名字。
包名在哪改呢？
很简单，在package.json文件中改。
我这里只加了个后缀。
接着继续执行npm publish就可以发布了！
4. 访问npm官网，访问Code菜单
发布成功后，你可以登录npm官网，搜索你刚发布的包名，找到你的包。或者直接访问路径：https://www.npmjs.com/package/你的包名
我这里的路径如下：https://www.npmjs.com/package/pic-npm-xiaohei
进入包的详情页后，点击左侧的Code菜单项。这里会显示你包的所有文件和目录结构。
5. 打开调试窗口，抓取这个文件的访问链接
为了获取URL，你可以打开浏览器的开发者工具（通常可以通过按F12或右键点击页面选择“检查”来打开）。
找到“网络”（Network）标签页，然后点击文件。
点击后，网络标签页内，会多出一个链接。
找到这个链接，右键点击这条记录，选择“复制” > “复制网址”，这样你就得到了这个文件的直接访问URL。
6. 将这个链接写入你的readme文件即可
最后一步，在任何一个Markdown文件中，你可以使用Markdown语法插入这个图片，将之前复制的URL作为图片的src属性。
例如，本篇文章使用的示例：
https://www.npmjs.com/package/pic-npm-xiaohei/file/b6cc3418ebac938dc2d179645fbf5a62bb1d0b56d0169a6be2f52d9b30c9a894
最终的效果预览图
请注意，由于我们实际上是将图片作为文本文件上传的，直接访问这个URL时，浏览器可能会尝试以文本形式显示它。
但在Markdown中，由于我们指定了它是一个图片（通过![]()语法），浏览器会正确地将其作为图片处理。
至此，你已经成功地将npm仓库当作了一个免费的图床，并且完全绕过了npm对文件类型的限制。
结语
这种方法虽然有些“取巧”，但确实是一种实现个人免费图床的有效手段。不过，请确保你上传的内容符合npm的社区准则和法律法规，避免造成不必要的麻烦。
这种方法能够有效节省本地存储空间，让图片管理更加便捷高效。它能很方便的对图片进行分享与传播，只需生成链接或嵌入代码，即可轻松实现跨平台共享。
PS：文章看完了，如果本文对你有所帮助，请点赞、收藏，这样能让更多人知道！
励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！
