導入現有項目 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" />