当前位置: 首页 > ds >正文

Nodejs+http-server 使用 http-server 快速搭建本地图片访问服务

在开发过程中,我们经常需要临时查看或分享本地的图片资源,比如设计稿、截图、素材等。虽然可以通过压缩发送,但效率不高。本文将教你使用 Node.js 的一个轻量级工具 —— http-server,快速搭建一个本地 HTTP 图片预览服务,支持浏览器访问和局域网共享。

🔧 第一步:安装 Node.js

如果你还没有安装 Node.js,请前往官网下载并安装:

🔗 https://nodejs.org/

安装完成后,在命令行中执行以下命令验证是否安装成功:

node -v
npm -v

如果能看到版本号输出,说明安装成功!

🔧 第二步:全局安装 http-server

http-server 是一个零配置的静态文件服务器,非常适合用来快速启动本地服务。

执行以下命令进行安装:

npm install -g http-server

如果你在国内,建议使用淘宝镜像加速安装:

npm install -g http-server --registry=https://registry.npmmirror.com

🚀 第三步:进入图片目录并启动服务

打开命令行工具(Windows 使用 CMD 或 PowerShell,macOS/Linux 使用 Terminal)
进入你的图片文件夹路径,例如

cd C:\Users\你的用户名\Pictures

启动服务,默认端口是 8080:

http-server -p 8000 -o

或者指定端口为 3000:

http-server -p 3000 -o

🖥️ 第四步:浏览器访问图片服务

服务启动后,你会看到如下输出:

Starting up http-server, serving ./
Available on:http://127.0.0.1:3000http://192.168.x.x:3000
Hit CTRL-C to stop the server

打开浏览器,输入以下任意地址即可访问:

本机访问:

http://localhost:3000

局域网访问(其他设备):

http://你的IP地址:3000

你将会看到当前目录下的所有文件列表,点击即可直接浏览图片内容。

🌐 拓展功能(可选)

开启跨域访问(CORS)

如果你希望网页通过 JavaScript 跨域访问这些图片资源,可以加上 --cors 参数:

http-server --cors
关闭缓存

避免浏览器缓存旧文件:

http-server -c 0
使用 HTTPS(进阶)
http-server --ssl --cert cert.pem --key key.pem

你需要提前准备好 SSL 证书文件。

停止服务

按下键盘上的:

Ctrl + C

然后输入 Y 确认终止服务即可。

http://www.xdnf.cn/news/9560.html

相关文章:

  • 计算机网络(4)——网络层
  • 使用LangChain与多模态模型实现图像中的文字和表格提取(PDF可转图片)
  • Android 插件化
  • 中企出海大会|打造全球化云计算一张网,云网络助力中企出海和AI创新
  • AudioTrack的理解
  • Mini-F5265-OB开发板——UART不定长接收
  • 内联盒模型基本概念?——前端面试中的隐形考点剖析
  • 前端EXCEL插件智表ZCELL数据源功能详解
  • LabVIEW 中内存释放相关问题
  • 2025年渗透测试面试题总结-匿名[校招]安全工程师(甲方)(题目+回答)
  • 第2讲、从启动到表单加载:Odoo 18 的完整执行流程详解
  • [科研实践] VS Code (Copilot) + Overleaf (使用 Overleaf Workshop 插件)
  • RabbitMQ仲裁队列高可用架构解析
  • Mac 版不能连接华为 GaussDB 吗?我看 Windows 版可以连接?
  • delphi12 sqlserver 客户-服务简单连接设置
  • GitLab CI流水线权限隔离
  • 数据结构-代码总结
  • Spring AI系列之使用 Mistral AI API 实现函数调用
  • MySQL 默认的隔离级别解析
  • AWS WebRTC:获取ICE服务地址(part 1)
  • Flask集成Selenium实现网页截图
  • SpringBoot+tabula+pdfbox解析pdf中的段落和表格数据
  • docker学习基本使用教程
  • Cursor:开启智能编程新视界
  • :inline=“true“会发生什么
  • 音视频解码基础知识
  • 从C++编程入手设计模式1——单例模式
  • Canvas实例篇:黑客帝国-3D字幕雨
  • 力扣面试150题--二叉树的最近公共祖先
  • 【Java工程师面试全攻略】Day3:Java并发编程面试精要