JavaScript无法直接拦截真实图片请求，但可通过四种方式实现等效Mock：1.运行时动态替换img src；2.构建时用Webpack/Vite插件重写路径；3.测试中用MSW拦截fetch请求并返回Blob；4.开发代理层重定向图片API。
JavaScript 中无法直接用纯前端代码“拦截”真实图片请求并返回模拟资源，因为浏览器出于安全限制，不允许脚本篡改已发起的 <img> 标签或 CSS 背景图的网络请求。但可以通过几种实用方式实现效果等价的图片 Mock 行为：在请求发出前替换 URL、用 Blob 模拟响应、或结合构建/测试工具在 HTTP 层拦截。下面分场景说明常用且可行的方法：
1. 前端运行时：动态替换图片 src（最简单直接）
适用于开发调试、组件单元测试或内部管理后台等可控环境。不改变网络行为，而是让 img 标签加载你指定的占位图或 base64 图片。
- 用 JS 批量重写所有
<img>的src属性，例如指向本地占位图服务（如https://via.placeholder.com/200x150?text=Mock） - 对特定 class 或 data 属性的图片做条件替换：
<img data-mock="user-avatar" src="/api/avatar/123">
然后执行：
document.querySelectorAll('img[data-mock]').forEach(el => {<br> el.src = 'data:image/svg+xml;base64,PHN2Zy...'; // 内联 SVG 占位图<br>}); - 封装一个轻量函数，在 React/Vue 组件中按需调用，避免污染全局 DOM
2. 构建时：Webpack/Vite 插件重写图片资源引用
适合工程化项目，在代码打包阶段把真实图片路径替换成 mock 路径（如本地静态文件或 base64）。
- Webpack：使用
webpack.NormalModuleReplacementPlugin或自定义 loader，匹配/.png$/i等规则，返回 mock 图片模块 - Vite：编写插件监听
resolveId钩子，当解析到某类图片路径（如/src/assets/api/下）时，返回一个内联的export default 'data:image/png;base64,...'模块 - 优点：零运行时开销，mock 行为对业务代码完全透明
3. 测试环境：借助 MSW（Mock Service Worker）拦截 fetch/XHR 并伪造图片响应
MSW 本质是利用 Service Worker 拦截浏览器发起的网络请求，可精准 mock 图片接口（如 /api/image?id=xxx），但不适用于直接 <img src="/api/image?id=123"> 这类 HTML 内置加载——因为 img 标签触发的是“主文档资源请求”，默认不受 MSW 控制（除非开启 enableCorsForAllOrigins: true 并配合特殊配置，但兼容性差）。
立即学习“Java免费学习笔记（深入）”；
- ✅ 推荐用法：将图片加载改为 JS 主动发起（如
fetch('/api/image').then(r => r.blob()).then(showAsImg)），再用 MSW mock 该接口返回 Blob 或 base64 - ✅ 可 mock
Response类型为image/png，设置正确Content-Type和二进制 body - ⚠️ 注意：不能拦截传统
<img src="...">的请求，这是浏览器底层行为，Service Worker 仅能拦截 fetch/XMLHttpRequest/EventSource 等可编程请求
4. 开发代理：用 vite-plugin-mock 或 Nginx 拦截图片请求路径
在本地开发服务器层面做路由映射，把匹配的图片 API 路径重定向到本地静态文件。
- Vite：配合
vite-plugin-mock，配置 mock 规则：{ url: '/api/image/\d+', method: 'get', response: () => fs.readFileSync('./mocks/avatar.png') } - Nginx / dev-server：把
location ^~ /api/image/代理到本地/static/mock-img.png - 关键点：确保你的图片 URL 是通过 JS 动态生成并用于
img.src，而不是写死在 HTML 中；否则仍走原始路径
不复杂但容易忽略：真正要 mock 的不是“图片本身”，而是“获取图片的途径”。明确你是想绕过后端接口、跳过网络请求、还是统一替换视觉呈现——选对方法比强行拦截更高效可靠。
