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

news2025/6/4 0:38:03
在开发过程中,我们经常需要临时查看或分享本地的图片资源,比如设计稿、截图、素材等。虽然可以通过压缩发送,但效率不高。本文将教你使用 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:3000
  http://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.coloradmin.cn/o/2395379.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【AI论文】推理语言模型的强化学习熵机制

摘要:本文旨在克服将强化学习扩展到使用 LLM 进行推理的主要障碍,即策略熵的崩溃。 这种现象在没有熵干预的RL运行中一直存在,其中策略熵在早期训练阶段急剧下降,这种探索能力的减弱总是伴随着策略性能的饱和。 在实践中&#xff…

Ubuntu22.04 安装 IsaacSim 4.2.0

1. 从官网下载 IsaacSim 4.2.0 安装包 https://download.isaacsim.omniverse.nvidia.com/isaac-sim-standalone%404.2.0-rc.18%2Brelease.16044.3b2ed111.gl.linux-x86_64.release.zip 2. 查阅 Workstation Installation 安装方式 Workstation Installation — Isaac Sim Do…

Java代码重构:如何提升项目的可维护性和扩展性?

Java代码重构:如何提升项目的可维护性和扩展性? 在Java开发领域,随着项目规模的不断扩大和业务需求的频繁变更,代码的可维护性和扩展性逐渐成为了项目成功的关键因素。代码重构作为一种优化代码质量的重要手段,能够在…

《Python语言程序设计》2018 第4章第9题3重量和价钱的对比,利用第7章的概念来解答你

利用类来解答这个问题。 pack1, price1 50, 24.59 pack2, price2 25, 11.99class result:def __init__(self,pack,price):self.pack packself.price pricedef set_pack(self):return self.packdef set_price(self):return self.pricedef get_result(self):return self.pric…

在IIS上无法使用PUT等请求

错误来源: chat:1 Access to XMLHttpRequest at http://101.126.139.3:11000/api/receiver/message from origin http://101.126.139.3 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 其实我的后…

数据基座觉醒!大数据+AI如何重构企业智能决策金字塔(上)

1. 数据金字塔的千年进化史 1.1 从地窖到云端的存储革命 某家电企业在2010年遭遇库存危机时,市场部门需要三天才能从纸质单据中统计出全国滞销型号。当他们的数据工程师在2023年轻声唤醒对话式分析机器人,同样的需求响应时间缩短至9秒。 数据分层架构的…

使用 DeepSeek API 搭建智能体《无间》- 卓伊凡的完整指南 -优雅草卓伊凡

使用 DeepSeek API 搭建智能体《无间》- 卓伊凡的完整指南 -优雅草卓伊凡 作者:卓伊凡 前言:为什么选择 DeepSeek API,而非私有化部署? 在开始搭建智能体之前,我想先说明 为什么推荐使用 DeepSeek API,而…

FPGA纯verilog实现MIPI-DSI视频编码输出,提供工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的 MIPI 编解码方案 3、设计思路框架工程设计原理框图FPGA内部彩条RGB数据位宽转换RGB数据缓存MIPI-DSI协议层编码MIPI-DPHY物理层串化MIPI-LVDS显示屏工程…

手写字魔法消除3:深度学习PmrNet神经网络实现图片修复(含训练代码、数据集和GUI交互界面)

第一步:PmrNet介绍 PmrNet是一种基于U-Net架构改进的深度学习网络,来自于论文《Practical Deep Raw Image Denoising on Mobile Devices》,这个网络聚焦于在移动设备上实现高效的原始图像(RAW)去噪(本文用来…

opencv使用经典bug

opencv经典bug 1.bug介绍2.解决方案 1.bug介绍 D:\anaconda3\envs\yolo11s\python.exe F:\BYSJ\LX\yolov11-main\OCR_plateRecognition\plateRevise.py Traceback (most recent call last): File "F:\BYSJ\LX\yolov11-main\OCR_plateRecognition\plateRevise.py", l…

计算机基础——宏病毒防御与网络技术

文章目录 宏病毒详解与防范措施宏病毒简介宏病毒的特点宏病毒的传播途径宏病毒的防范措施宏病毒的检测与清除 自治计算机与自治系统解析什么是自治计算机?技术特点 自治系统(Autonomous System, AS)特点:自治系统类型 总结&#x…

Python uv包管理工具使用详解

一、UV 工具概述 ​UV​ 是由 Astral 团队(Ruff 工具开发者)用 Rust 编写的新一代 Python 包管理器,旨在替代传统工具链(如 pip、virtualenv、poetry 等),提供以下核心优势 : ​极速性能​&a…

基于微信小程序的云校园信息服务平台设计与实现(源码+定制+开发)云端校园服务系统开发 面向师生的校园事务小程序设计与实现 融合微信生态的智慧校园管理系统开发

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

大语言模型的技术原理与应用前景:从Transformer到ChatGPT

目录 摘要 1. 引言 2. Transformer架构核心原理 2.1 自注意力机制 2.2 位置编码 2.3 前馈神经网络 3. 从GPT到ChatGPT的演进 3.1 GPT系列模型架构 3.2 训练流程优化 4. 应用场景与案例分析 4.1 代码生成 4.2 文本摘要 4.3 问答系统 5. 挑战与未来方向 5.1 当前技…

生成式人工智能:重构软件开发的范式革命与未来生态

引言 生成式人工智能(GenAI)正以颠覆性力量重塑软件开发的底层逻辑。从代码生成到业务逻辑设计,从数据分析到用户交互,GenAI通过其强大的推理能力与场景适应性,将传统开发流程的“复杂工程”转化为“敏捷实验”&#…

day1-小白学习JAVA---JDK安装和环境变量配置(mac版)

JDK安装和环境变量配置 我的电脑系统一、下载JDK1、oracle官网下载适合的JDK安装包,选择Mac OS对应的版本。 二、安装三、配置环境变量1、终端输入/usr/libexec/java_home -V查询所在的路径,复制备用2、输入ls -a3、检查文件目录中是否有.bash_profile文…

数据分析实战1(Excel制作报表)

Excel数据链接:【课程4.0】第2章_Excel.zip - 飞书云文档 1、拿到数据第一步 备份数据 ctrlshiftL:筛选 相关快捷键:(alt:自动求和、ctrlshift5:转换为%) 2、环比、同比 环比(本…

本地部署大模型llm+RAG向量检索问答系统 deepseek chatgpt

项目视频讲解: 本地部署大模型llm+RAG向量检索问答系统 deepseek chatgpt_哔哩哔哩_bilibili 运行结果:

LabVIEW 中内存释放相关问题

在LabVIEW 编程领域,内存管理是一个关键且复杂的议题。我们常常关注 LabVIEW 如何将内存释放回操作系统(OS),以及是否有方法确保在特定数据结构(如队列、变体属性、动态数据引用 DVR 等)销毁、删除或清空后…

基于内存高效算法的 LLM Token 优化:一个有效降低 API 成本的技术方案

在使用 OpenAI、Claude、Gemini 等大语言模型 API 构建对话系统时,开发者普遍面临成本不断上升的挑战。无论是基于检索增强生成(RAG)的应用还是独立的对话系统,这些系统都需要维护对话历史以确保上下文的连贯性,类似于…