react-img-mapper库在React正常，Next.js中无法渲染的问题求助

问题 #

我有一个客户项目需要使用图像地图，找到的react-img-mapper库在React中可正常运行，但在Next.js中完全无法渲染。我尝试添加"use client"指令、将原生img标签替换为next/image的Image组件，甚至拷贝库代码本地化修改，设置固定宽高后仍无效果。已提交相关Issue并提供了React和Next.js的Sandbox示例，希望得到解决办法或可用的替代库推荐。

本地化修改后的代码片段 #

return (
  <div ref={container} id="img-mapper" style={styles(props).container}>
    <Image
      ref={img}
      role="presentation"
      // className="img-mapper-img h-96 w-64"
      style={{
        ...styles(props).img,
        ...(!imgRef ? { display: "none" } : {}),
        height: 640,
        width: 480,
      }}
      src={srcProp}
      useMap={`#${map.name}`}
      alt="map"
      onClick={(event) => imageClick(event, props)}
      onMouseMove={(event) => imageMouseMove(event, props)}
      height={640}
      width={480}
    />
    <canvas
      ref={canvas}
      className="img-mapper-canvas"
      style={styles().canvas}
    />
    <map className="img-mapper-map" name={map.name} style={styles().map}>
      {isRendered && !disabled && imgRef && renderAreas()}
    </map>
  </div>
);

可行解决办法 #

针对react-img-mapper的修复尝试 #

1. 禁用Next.js Image优化特性
   next/image的自动优化可能干扰useMap属性绑定，添加unoptimized={true}属性，同时确保图片路径已在next.config.js的domains中配置：

   <Image
     // 保留原有属性
     unoptimized={true}
   />
   

2. 回退到原生img标签
   放弃next/image，直接用原生<img>，配合"use client"确保组件在客户端渲染：

   'use client';
   // 其他代码不变
   <img
     ref={img}
     role="presentation"
     style={{
       ...styles(props).img,
       ...(!imgRef ? { display: "none" } : {}),
       height: 640,
       width: 480,
     }}
     src={srcProp}
     useMap={`#${map.name}`}
     alt="map"
     onClick={(event) => imageClick(event, props)}
     onMouseMove={(event) => imageMouseMove(event, props)}
   />
   

3. 校准Canvas尺寸匹配
   本地化修改库代码时，确保canvas元素的宽高和图片实际尺寸完全一致，同时检查imgRef是否正确获取到图片的宽高数据，避免尺寸不匹配导致热区无法绘制。

替代库推荐 #

• react-image-mapper：注意和react-img-mapper是不同库，对Next.js兼容性更好，支持客户端渲染，无需复杂配置即可使用。
• 自定义基础图像地图：如果需求不复杂，直接用原生HTML的<map>和<area>标签配合客户端组件实现，完全可控：

  'use client';
  export default function ImageMap() {
    const handleAreaClick = (areaId) => {
      // 处理点击逻辑
    };
    return (
      <div>
        <img src="/your-image.jpg" useMap="#image-map" width={480} height={640} />
        <map name="image-map">
          <area 
            shape="rect" 
            coords="0,0,100,100" 
            onClick={() => handleAreaClick('area1')} 
            alt="Area 1"
          />
          {/* 更多热区定义 */}
        </map>
      </div>
    );
  }
  

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