¿Es posible que podamos proteger la imagen de cosas como hacer clic con el botón derecho y descargar, o hacer una captura de pantalla de nuestra imagen? aquí la imagen de la etiqueta
<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)`, }} />Realmente no se puede proteger una imagen para que no se descargue porque el navegador debe descargarla para mostrarla al usuario, en la página web, en algún momento.
Sin embargo, puede restringir ciertas operaciones en las imágenes (p. ej., hacer clic con el botón derecho, arrastrar la imagen) que, para el usuario común, restringirá la descarga del archivo de imagen.
La propiedad CSS pointer-events establece en qué circunstancias (si las hay) un elemento gráfico en particular puede convertirse en el objetivo de los eventos de puntero. Por lo tanto, en el accesorio de style , puede agregar pointerEvents: none; propiedad para deshabilitar el menú contextual al hacer clic en la imagen con el RMB.
Lectura relacionada:eventos de puntero en MDN