导入现有项目 map 时未加载图像以做出反应

Question

我正在尝试将https://github.com/ferolz/mapa-mexico-html5导入到反应项目中，但图像未显示。

反应组件。

<map name="mexico" id="map_ID">
  <area id="AGU" data-id-estado="1" alt="AGU" title="Aguascalientes" className="area" href="www.cofemer.gob.mx" shape="poly" coords="317,269,317,268,319,268,319,269,320,269,320,270,321,270,321,272,322,272,322,275,323,275,323,276,324,276,324,277,325,277,325,278,324,278,324,279,322,279,322,280,321,280,321,281,320,281,320,282,319,282,319,283,315,283,315,282,312,282,312,281,308,281,308,282,306,282,306,283,306,282,305,282,305,280,304,280,304,277,305,277,305,275,307,275,307,274,308,274,308,273,310,273,310,272,311,272,311,271,313,271,313,270,315,269,317,269" />
</map>

HTML 加载img

 <div id='content_mapa'>
      <img id="map_ID" className="map" src={require('./images/mapa.png')} useMap="#mexico" title="Mexico" alt="Mexico" />
       <div id="edo" >&nbsp;</div>
       <div className="escudo"></div>
 </div>

该图像位于我的 src 项目中的一个文件夹中我创建了一个 function 以便我可以返回到我的

Answer 1

尝试像这样导入图像：

import imageMap from './images/mapa.png'

然后在 img 上执行此操作：

<img id="map_ID" className="map" src={imageMap} useMap="#mexico" title="Mexico" alt="Mexico" />