如何禁用右键单击或设置图像无法下载(React Js 中的图像)

Question

我们是否可以保护图像免受右键点击和下载，或截图我们的图像?这里的标签image

<img
src={pat.name}
alt=""
className="absolute "
style={{
top: 77,
left: 20.5,
zIndex: 2,
width: 280,
boxShadow: `0px 4px 8px 2px rgba(3, 21, 49, 0.06)`,
}}
/>

Answer 1

你不能真正保护图像不被下载，因为它必须由浏览器下载，以便在某个阶段在网页上呈现给用户。

但是，您可以限制对图像的某些操作(例如右键单击，拖动图像)，这对于普通用户来说，将限制下载图像文件。

pointer-eventsCSS属性设置在什么情况下(如果有的话)一个特定的图形元素可以成为指针事件的目标。因此，在style道具中，您可以添加pointerEvents: none;属性，以便在点击带有人民币的图像时禁用上下文菜单。

相关阅读:MDN上的pointer-events