0
196
VisualizaçõesNext.js configurando el evento de clic solo en el componente de imagen
Quiero poder hacer un evento de clic solo en la imagen, pero debido a que tengo que establecer el ancho y la altura, está configurando un evento de clic en todo el div principal.
por ejemplo, si la imagen tiene un ancho de 600 por una altura de 300, donde hay espacio entre el padre, el evento de clic todavía ocurre fuera de la imagen pero dentro del padre.
<div style={{ width: 600, height: 600 }} className="image-item bg-gray-200 w-9/12 h-auto relative" > <div onClick={(e) => handleTags(e)} className="" ref={imageWrapRef} > <Image className="" src={image["data_url"]} alt="" layout="fill" objectFit="contain" /> </div> </div> 
Todavía se puede hacer clic en el espacio arriba y debajo de la imagen, pero solo quiero hacer clic solo en la imagen.
Captura de pantalla del elemento inspector del código producido:
Aquí también hay un codesandbox que funciona: https://codesandbox.io/s/proud-rain-d51sv?file=/pages/index.js
1 Respostas
Responde à pergunta0
Entonces, para cualquiera que se encuentre con este problema. Una cosa que tendría que configurar es el ancho y el alto de la imagen antes de mostrarla.
Una de las respuestas que me ayudó fue usar onLoadingComplete , que puede ver más detalles aquí: Next.js ¿Los accesorios del componente de imagen onLoadingComplete no funcionan?
Esto me permitió proporcionar el ancho/alto:
<Image onLoadingComplete={(e) => handleImageLoad(e)} className="" src={data2blob(image)} alt="" width={imageWidth} height={imageHeight} layout="responsive" objectFit="contain" />la función handleImageLoad así:
const handleImageLoad = (e) => { setImageWidth(e.naturalWidth); setImageHeight(e.naturalHeight); };Editar:
Me encontré con un problema anterior, que era el problema del huevo y la gallina (la carga de la imagen y luego las dimensiones). Entonces, lo que tenía que hacer era establecer inicialmente el ancho y la altura:
const [imageWidth, setImageWidth] = useState(0); const [imageHeight, setImageHeight] = useState(0);