Next.js设置只单击图像组件上的事件

Question

我希望能够只对图像执行单击事件，但由于必须设置宽度和高度，因此必须在整个父div上设置单击事件。

例如，如果图像的宽度为600宽300英尺，在父图像之间仍有空格单击事件仍然发生在图像之外，但在父图像中。

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

​

​

上面和下面的空间仍然是可点击的，但我只想点击图片。

生成代码的检查器元素的屏幕截图：

​

​

这里还有一个工作代码框：https://codesandbox.io/s/proud-rain-d51sv?file=/pages/index.js

Answer 1

所以对于任何遇到这个问题的人来说。在显示图像之前，我必须设置图像的宽度和高度。

帮助我的答案之一是使用onLoadingComplete，您可以在这里看到更多的细节：Next.js Image component props onLoadingComplete not working?

这使我能够提供宽度/高度：

<Image
  onLoadingComplete={(e) => handleImageLoad(e)}
  className=""
  src={data2blob(image)}
  alt=""
  width={imageWidth}
  height={imageHeight}
  layout="responsive"
  objectFit="contain"
/>

handleImageLoad函数如下：

const handleImageLoad = (e) => {
  setImageWidth(e.naturalWidth);
  setImageHeight(e.naturalHeight);
};

编辑：

我在上面遇到了一个问题，那就是鸡和蛋的问题(图像上传，然后是尺寸)。所以我要做的是首先设置宽度和高度：

const [imageWidth, setImageWidth] = useState(0);
const [imageHeight, setImageHeight] = useState(0);