Next.js setting click event only on Image component-CodePudding

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

CodePudding user response：

Move the click handler to the image tag if you want only the image to be responsive to click interactions.

<div
  style={{ width: 600, height: 600 }}
  className="bg-gray-200 w-9/12 h-auto relative"
>
  <div className="" ref={imageWrapRef}>
    <Image
      className=""
      onClick={handleTags}
      src={image["data_url"]}
      alt=""
      layout="fill"
      objectFit="contain"
    />
  </div>
</div>

CodePudding user response：

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 onl oadingComplete not working?

This allowed me to provide the width/height:

<Image
  onl oadingComplete={(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);
};