html图片404的根本原因是express默认不处理静态资源请求，必须显式配置express.static()中间件；挂载路径与img src必须严格匹配，且需注意大小写、mime类型、路径安全及构建工具的资源处理逻辑。
HTML中图片路径 404 的根本原因
不是“没放对位置”，而是 Express 默认完全不处理 <img src="xxx"> 这类请求——它压根不知道该去哪找文件。浏览器发 GET /images/cat.jpg，Express 不会自动映射到 ./public/images/cat.jpg，除非你明确告诉它：app.use(express.static('public'))。
常见错误现象：
- 控制台报
Failed to load resource: the server responded with a status of 404 (Not Found) - 图片显示为破损图标，但 HTML 结构、
<img>标签语法完全正确 - 直接访问
http://localhost:3000/images/cat.jpg返回空白页或 404，而非图片二进制流
express.static() 挂载点与 HTML 中 src 路径必须严格对齐
挂载方式决定 HTML 里怎么写 src，错一个字符就 404。这不是约定，是硬匹配规则。
实操建议：
- 统一用绝对路径：写
src="/images/cat.jpg"，别用src="images/cat.jpg"（相对路径在路由嵌套时极易出错） - 若挂载
app.use('/assets', express.static('public'))，HTML 必须写src="/assets/images/cat.jpg" - 若挂载
app.use(express.static('public'))，HTML 写src="/images/cat.jpg"（注意开头的/） - 确保
public/images/cat.jpg真实存在，且大小写完全一致（Linux/macOS 区分大小写）
Webpack 构建后 HTML 引用静态资源的注入逻辑
Webpack 不会改写你手写的 <img src="xxx">，它只处理通过 require() 或 import 加载的资源。想让构建产物里的 HTML 自动带 hash、自动适配 public 目录结构，得靠插件。
Rydberg Agent Node
下载
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r
关键配置点：
-
html-webpack-plugin是核心：它把打包后的 JS/CSS 注入 HTML，并支持template和inject选项 - 图片等静态资源需通过
file-loader或asset-module处理，否则 Webpack 不生成对应文件，也不修改引用路径 - 如果 HTML 中有硬编码的
<img src="./logo.png">，Webpack 默认不处理——它不属于模块依赖图，不会被重写或拷贝 - 推荐做法：所有静态资源走
require('./logo.png')，让 Webpack 控制输出路径和文件名
Node.js 手写静态服务时 MIME 类型和路径解码容易漏掉
自己用 http + fs 写服务时，path.extname() 取不到扩展名、中文路径乱码、返回的 Content-Type 是 text/plain 导致图片无法渲染——这些都不是偶然，是缺失基础校验。
必须补上的细节：
- 对
req.url做decodeURI()，否则含中文或空格的路径直接 404 - 用
path.extname(filePath)获取扩展名后，查表映射 MIME 类型，比如.jpg→image/jpeg，不能全写成text/html - 目录访问要兜底：当请求
/images/时，检查是否存在public/images/index.html，否则应返回 404 或目录列表（非生产环境） - 避免用
__dirname + req.url拼路径——可能被构造恶意路径如../../../etc/passwd，要用path.resolve(publicDir, pathname)做安全截断
真正麻烦的不是写几行 express.static()，而是当项目从单页变成多入口、从开发模式切到构建部署、从本地调试跳到 Nginx 代理时，路径映射关系会层层断裂。每个环节都得验证：请求 URL → Express 路由匹配 → 文件系统路径 → MIME 响应头 → 浏览器解析行为。少一环，图片就挂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
