完全禁止保存图片在技术上不可能，因图片一旦渲染即暴露于用户环境；可行措施包括禁用右键、禁止拖拽选中、服务端鉴权与水印版权标识。
禁用右键菜单阻止图片另存为
浏览器原生右键菜单里“图片另存为”是最直接的保存路径，禁用它能挡住大部分普通用户。但注意：这只是表层防护，不防截图、开发者工具或网络面板下载。
- 给
<img alt="如何让HTML网页中的图片不能够被保存" >或整个页面加oncontextmenu="return false"即可拦截右键事件 - 更稳妥的做法是绑定到
document：document.addEventListener('contextmenu', e => e.preventDefault()) - 别只对单张图加，否则用户点空白处再右键仍能打开菜单；也别漏掉移动端——
touchstart+ 长按模拟也需要处理
CSS 禁止选中和拖拽图片
防止用户拖拽图片到桌面，或选中后复制（虽然图片本身不能被“复制”，但拖拽行为会触发下载）。
- 给图片加样式：
user-select: none; -webkit-user-drag: none; - 必须同时写
-webkit-user-drag和user-drag（后者是实验性标准，支持度低，但加了没坏处） - 如果图片在
<a></a>标签里，记得给<a></a>也加draggable="false"，否则 Chrome 仍可能触发拖拽
服务端返回不可直链的图片响应头
真正有效的防护得靠服务端配合。即使前端做了所有限制，只要图片 URL 是公开可访问的，别人就能在新标签页打开、用 curl 下载、或从 Network 面板里复制链接。
- 设置响应头
Content-Disposition: attachment，会让浏览器默认下载而非显示——但这会破坏网页正常渲染，慎用 - 更合理的是用临时 token 鉴权：图片 URL 带过期参数，如
/img/abc.jpg?t=1715823400&sig=xxx，服务端校验通过才返回图片 - 配合 Referer 检查（
Referer头是否来自你的域名），但这个头可被客户端伪造，只能防简单爬取
为什么「完全禁止保存」在技术上不可能
只要图片最终被浏览器解码并渲染到屏幕上，就已暴露在用户可控环境中。
立即学习“前端免费学习笔记（深入）”；
- 开发者工具的
Network面板里，所有图片资源都明明白白列着，点击就能右键“Open in new tab”再另存 - 内存中的解码图像可被截图、录屏、甚至用
canvas.getContext('2d').getImageData()提取像素（如果没跨域） - 所谓“防盗图”本质是提高门槛，不是封锁。重点应放在：明确版权标识、水印叠加、以及法律层面的权属声明
想靠前端代码彻底锁死图片，等于让浏览器既给你画图，又不让你看见画布——这事儿它不干。
