marker.js2在Next.js项目中无法正常运行的问题求助

问题根源 #

Next.js的Image组件是经过封装的优化组件，并非原生HTML <img> 元素：

• 组件内部包含额外布局元素，useRef 获取到的是Next组件实例而非真实的img DOM节点
• markerjs2需要直接绑定到原生img元素上才能初始化标注面板，无法识别封装后的组件结构

解决办法 #

方案1：替换为原生<img>标签（推荐） #

直接使用原生img标签替代Next.js Image组件，确保markerjs2能获取到正确的目标元素：

import React, { useRef } from 'react';
import * as markerjs2 from 'markerjs2';
import styles from "styles/sitePreMobilizationReview/sitePreMobilizationReview.module.css";

const YourComponent: React.FC<{ img: { url: string, file: File }; imgIndex: number }> = ({ img, imgIndex }) => {
  const imgRef = useRef<HTMLImageElement>(null);

  const handleAnnotation = () => {
    console.log("I am clicking");

    if (!imgRef.current) {
      console.error(`Element with ID 'issueImage-${imgIndex + 1}' not found.`);
      return;
    }

    try {
      const markerArea = new markerjs2.MarkerArea(imgRef.current);
      console.log("MarkerArea initialized:", markerArea);

      markerArea.addEventListener('render', (event) => {
        console.log("Event listener triggered:", event);

        if (imgRef.current) {
          imgRef.current.src = event.dataUrl;
        }
      });
      markerArea.show();
      console.log("MarkerArea shown");
    } catch (error) {
      console.error("Error initializing markerjs2:", error);
    }
  };

  const handleError = () => {
    console.log("Image load error");
    URL.revokeObjectURL(URL.createObjectURL(img.file));
  };

  return (
    <img
      src={img.url}
      alt={`Issue Image ${imgIndex + 1}`}
      className={styles.issueImage}
      width={100}
      height={100}
      ref={imgRef}
      onError={handleError}
      id={`issueImage-${imgIndex + 1}`}
      onClick={handleAnnotation}
    />
  );
};

export default YourComponent;

方案2：保留Next.js Image组件（兼容写法） #

若需保留Next Image的优化特性，可通过获取组件内部的原生img元素来绑定markerjs2：

// 修改handleAnnotation函数中的元素获取逻辑
const handleAnnotation = () => {
  console.log("I am clicking");

  // 获取Next Image内部的原生img元素
  const realImg = imgRef.current?.querySelector('img');
  if (!realImg) {
    console.error("Native img element not found inside Next.js Image");
    return;
  }

  try {
    const markerArea = new markerjs2.MarkerArea(realImg);
    console.log("MarkerArea initialized:", markerArea);

    markerArea.addEventListener('render', (event) => {
      console.log("Event listener triggered:", event);
      realImg.src = event.dataUrl;
    });
    markerArea.show();
    console.log("MarkerArea shown");
  } catch (error) {
    console.error("Error initializing markerjs2:", error);
  }
};

// 组件返回部分保持原Next Image代码不变

注意：此方案依赖Next.js Image的内部DOM结构，若Next.js版本更新导致结构变化，可能失效。

内容的提问来源于stack exchange，提问作者Azeem