0
191
ViewsNext.js setting click event only on Image component
I want to be able to just do a click event on only the image, but because I have to set width and height, its setting a click event on the entire parent div.
for example, if the image is 600 width by 300 height, where there's space between the parent the click event is still happening outside the image but within the parent.
<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>
The space above and below the image are still clickable, but I just want to click on the image only.
Screenshot of inspector element of the produced code:
Here's a working codesandbox as well: https://codesandbox.io/s/proud-rain-d51sv?file=/pages/index.js
1 answers
Answer question0
So for anyone who comes across this issue. One thing that I would have to set is the image width and height of the image before displaying it.
One of the answers that helped me was using onLoadingComplete which you can see more details here: Next.js Image component props onLoadingComplete not working?
This allowed me to provide the width/height:
<Image
onLoadingComplete={(e) => handleImageLoad(e)}
className=""
src={data2blob(image)}
alt=""
width={imageWidth}
height={imageHeight}
layout="responsive"
objectFit="contain"
/>
the handleImageLoad function like so:
const handleImageLoad = (e) => {
setImageWidth(e.naturalWidth);
setImageHeight(e.naturalHeight);
};
Edit:
I did come across with an issue above, which was the chicken and egg problem (the image uploading, and then the dimensions). So what I had to do was to initially set the width and height:
const [imageWidth, setImageWidth] = useState(0);
const [imageHeight, setImageHeight] = useState(0);