使用react-img-mapper时浏览器不显示图片仅展示空白页

问题根因 #

• 项目同时安装了命名高度相似的react-image-mapper@0.0.15（已废弃的旧包）和react-img-mapper@1.4.0（当前维护版本），存在导入冲突风险
• react-img-mapper@1.4.0在React 18环境下，初始渲染阶段默认的图片尺寸自动计算逻辑存在兼容问题，未获取到尺寸时会渲染0宽高节点，直接表现为页面空白
• 代码中热区的fillColor值缺少十六进制颜色前缀#，会导致canvas绘制热区时颜色解析失败，不过该问题不会引发整体渲染空白

修复操作 #

1. 卸载冲突的废弃依赖包

npm uninstall react-image-mapper
# yarn用户执行对应命令即可
yarn remove react-image-mapper

2. 调整组件代码，显式传入图片宽高、开启响应式配置，补全颜色值前缀

import React from 'react';
import ImageMapper from 'react-img-mapper';
import "../assets/style.css";

function AreaOperation() {
  const imgUrl = 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.jpg';
  const mapConfig = {
    name: 'my-map',
    areas: [
      {
        id: "469f9800-c45a-483f-b13e-bd24f3fb79f4",
        active: true,
        title: "Hardwood",
        shape: "poly",
        name: "BB(1-4)",
        fillColor: "#eab54d4d", // 补全十六进制颜色#前缀
        strokeColor: "black",
        coords: [
          520.0646766169153,
          393.0348258706467,
          85.23880597014923,
          378.6069651741293,
          637,
          479,
          13.099502487562177,
          478.10945273631836,
          11.606965174129343,
          438.3084577114427
        ]
      }
    ]
  };
  
  return (
    <ImageMapper 
      src={imgUrl} 
      map={mapConfig}
      width={640} // 显式传入示例图实际宽度
      height={480} // 显式传入示例图实际高度
      responsive={true} // 开启容器宽度自适应
    />
  )
}

export default AreaOperation;

3. 检查全局样式、引入的style.css文件，确认没有给组件生成的img、canvas、外层容器标签设置display: none、0宽高、透明度为0的强制样式。

若以上操作完成后仍存在空白，可检查React 18严格模式的双执行影响，给ImageMapper组件添加固定key属性强制单次渲染即可。

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