Next.js setting click event only on Image component

Question

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

what's the div right above Image? Just wanted to know because if you are not using that you just pass the useRef on Image, no? Or if that is necessary still then using e.stopPropagation() we can stop bubbling — Wahab Shah, Sep 24 '21 at 05:50
@WahabShah I added a screenshot of what gets produced in DOM. The component from Next.js created a parent
wrapping the tag, and then me creating another
above the component is the empty class you see in the screenshot, hoping that I can just do an onClick around the image itself, but for some reason, it's affecting the parent with bg-gray-200 class — hellomello, Sep 24 '21 at 06:01
I mean the div other than your `bg-gray-200` div and the one nextJs creates. The div on which you have given `ref={imageWrapRef}`. Directly give it to your ``.? And after that we will have to do `e.stopPropogation()`. First try the above then comment kindly we can discuss — Wahab Shah, Sep 24 '21 at 06:10
@WahabShah I added a codesandbox just for reference. but are you saying to add ref to the component? — hellomello, Sep 24 '21 at 06:20

hellomello · Accepted Answer · 2021-09-26T19:11:43.287

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);

Next.js setting click event only on Image component

1 Answers1