如何设置图片不可点击，避免Chrome默认widget弹出防止用户下载图片？

首先需要明确：不存在100%阻止用户获取已加载到浏览器的图片的方案，以下方法仅可拦截普通用户通过Chrome默认弹出组件下载图片的行为，无法阻止有技术基础的用户通过控制台、缓存、网络请求面板等途径获取资源。

• 方案1：CSS 禁用指针事件（最简单）
  直接给图片添加pointer-events: none属性，即可拦截所有鼠标/触摸事件触发的Chrome默认行为，无需JS代码：

/* 全局生效 */
img {
  pointer-events: none;
}
/* 给指定图片生效 */
.protected-img {
  pointer-events: none;
}

注意：该方案会同时禁用所有绑定在图片上的自定义JS交互事件，有自定义点击需求的场景不适用

• 方案2：JS 拦截触发默认组件的事件
  如果需要保留图片的自定义交互，可以单独拦截会触发Chrome默认组件的相关事件：

const targetImg = document.querySelector('你的图片选择器');
// 禁用右键菜单
targetImg.addEventListener('contextmenu', e => e.preventDefault());
// 拦截点击默认行为
targetImg.addEventListener('click', e => e.preventDefault());
// 移动端拦截长按弹出菜单
targetImg.addEventListener('touchstart', e => {
  if (e.touches.length === 1) {
    const longPressTimer = setTimeout(() => e.preventDefault(), 300);
    targetImg.addEventListener('touchend', () => clearTimeout(longPressTimer), { once: true });
  }
});

• 方案3：用div背景图替代img标签
  Chrome的默认图片弹出组件仅对原生<img>标签生效，将图片设为div的背景图即可从根源避免触发原生组件：

<div 
  style="width: 300px; height: 200px; background: url('你的图片链接') center/cover no-repeat;"
></div>

注意：该方案需要手动设置容器宽高，且图片无法被搜索引擎正常识别，不适用于对SEO有要求的场景

• 方案4：添加透明遮罩层
  在图片上层叠加一层尺寸一致的透明div，所有交互事件会被遮罩层拦截，不会触发图片的原生行为，同时不影响自定义交互绑定在遮罩层上：

<div style="position: relative; width: fit-content;">
  <img src="你的图片链接" alt="">
  <div style="position: absolute; inset: 0; background: transparent;"></div>
</div>

若有更高等级的图片版权保护需求，建议搭配水印、图片切片、服务端动态加密渲染等方案组合使用。

内容的提问来源于stack exchange，提问作者alexarlindo