javascript - Image not loading while importing an existant project map to react

Question

I'm trying to import https://github.com/ferolz/mapa-mexico-html5 to a react project but the image is not showing.

The React component.

<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 to load the 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>

The image is in a folder inside my src project I create a function so i can return into my

Answer 1

Try to import the image like this:

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

Then on img do this:

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