如何隐藏Sources标签页中的网页图片？

给你几个实用的方案，按需选择：

• 用Canvas渲染图片
  别直接在页面里引用原始图片，而是通过JS把图片加载到Canvas里，再用Canvas生成展示内容。这样浏览器不会把原始图片存到Sources里，用户只能看到Canvas渲染后的结果。
  示例代码：

  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  // 注意：图片得满足同源策略，或者服务器配置了CORS允许跨域
  img.crossOrigin = 'anonymous';
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    // 清空原始图片地址，降低被内存快照捕获的概率
    img.src = '';
  };
  img.src = '/path/to/your-image.jpg';
  

  小缺点：要是用户懂点技术，可能通过Canvas提取像素数据还原图片，但比直接从Sources拿原图麻烦多了。

• 用一次性临时URL加载图片
  配合后端生成带签名或过期时间的临时图片链接，用户每次打开页面都生成新的链接，过期后就不能用了。就算用户在Sources里找到这个临时链接，也没法重复访问。
  大致逻辑：后端在用户请求页面时，生成一个带签名、有效期的图片接口地址，前端用这个地址加载图片，后端验证签名和有效期后再返回图片内容。

• 图片分片拼接
  把原始图片切成一堆极小的碎片（比如10x10像素的小图），前端加载完所有碎片后，用CSS定位或者Canvas拼成完整图片。这样Sources里只有这些小碎片，用户很难直接拿到完整的原始图。

• Base64嵌入图片（仅适合小图）
  把图片转成Base64编码，直接嵌到HTML的img标签或者CSS的background-image里。这种方式下，浏览器不会在Sources里生成单独的图片文件，Base64数据会包含在HTML或CSS文件里。
  示例：

  <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/..." alt="项目图片">
  

  缺点：Base64编码会让图片体积涨大概30%，用在大图上会明显拖慢页面加载速度。

要说明的是，没有绝对安全的方法能完全阻止技术熟练的用户获取图片内容，这些方法只是提高获取门槛，增加操作难度而已。

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