react-image-mapper初始加载出现Infinity值致映射失效求助

问题根源 #

react-image-mapper依赖图片的实际渲染宽高计算可点击区域坐标，但首次加载时图片还未完全加载，库获取到的宽高为0/undefined，导致计算出的区域值为Infinity；刷新后图片有缓存加载更快，计算逻辑能正常执行。

可行解决办法 #

1. 等待图片加载完成后再渲染映射组件

通过监听图片加载状态，确保图片宽高就绪后再初始化ImageMapper，避免无效计算：

import { useState } from 'react';
import ImageMapper from 'react-image-mapper';
import Image from 'next/image';

export default function ImageWithMapper() {
  const [imageLoaded, setImageLoaded] = useState(false);
  const imgSrc = '/your-image.jpg';
  const areas = [{ /* 你的区域配置 */ }];

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <Image
        src={imgSrc}
        fill
        objectFit="contain"
        onLoadingComplete={() => setImageLoaded(true)}
        alt="mapped image"
      />
      {imageLoaded && (
        <ImageMapper
          src={imgSrc}
          areas={areas}
          style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
        />
      )}
    </div>
  );
}

2. 手动指定图片固定宽高

如果图片尺寸是已知固定值，直接给ImageMapper传入width和height属性，跳过自动计算步骤：

<ImageMapper
  src="/fixed-size-image.jpg"
  width={1200}
  height={800}
  areas={yourAreasConfig}
/>

3. 添加加载状态提示

在映射就绪前显示加载提示，避免用户点击无效区域，提升体验：

import { useState } from 'react';
import ImageMapper from 'react-image-mapper';

export default function MappedImage() {
  const [isReady, setIsReady] = useState(false);

  return (
    <div>
      {!isReady && <div className="loading">图片加载中...</div>}
      <img
        src="/your-image.jpg"
        style={{ display: isReady ? 'block' : 'none' }}
        onLoad={() => setIsReady(true)}
        alt="mapped"
      />
      {isReady && <ImageMapper src="/your-image.jpg" areas={areas} />}
    </div>
  );
}

4. 强制触发映射区域重新计算

利用ImageMapper的ref方法，在图片加载完成后手动更新区域计算（部分版本支持updateAreas或recalculate方法）：

import { useState, useRef, useEffect } from 'react';
import ImageMapper from 'react-image-mapper';

export default function MappedImage() {
  const mapperRef = useRef(null);
  const [imageLoaded, setImageLoaded] = useState(false);

  useEffect(() => {
    if (imageLoaded && mapperRef.current) {
      mapperRef.current.updateAreas();
    }
  }, [imageLoaded]);

  return (
    <>
      <img
        src="/your-image.jpg"
        onLoad={() => setImageLoaded(true)}
        alt="mapped"
      />
      <ImageMapper
        ref={mapperRef}
        src="/your-image.jpg"
        areas={areas}
      />
    </>
  );
}

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