is it possible we can protect the image from things like right click and download, or screenshot our image? here the tag 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)`,
}}
/>You can't really protect an image from being download because it has to be downloaded by the browser in order to be rendered to the user, on the webpage, at some stage.
You can, however, restrict certain operations on images (e.g. right-clicking, dragging the image) which, for the common user, will restrict downloading the image file.
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. Thus, in the style prop, you can add the pointerEvents: none; property to disable the context menu when clicking on the image with the RMB.
Related read: pointer-events on MDN