React Leaflet - Marker image fails to load

Question

Issue

I'm using leaflet v1.7.1 and react-leaflet v3.0.5 in my React project.

When I try out the setup example in React Router's "Setup" documentation page, the marker icon becomes a broken image as circled in red below:

From the React Router's documentation, this is what the marker should look like:

Upon inspection, the src attribute of the <img> tag that holds the marker image should be https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png. However, upon inspection, my <img>'s src attribute turns out to be gibberish-looking:

Replication

I've created a new sandbox which contains my code:

Alternatively, follow these steps to replicate the issue:

1. npx create-react-app leaflet-test

2. cd leaflet-test/

3. npm i leaflet react-leaflet

4. Open the project in code editor. Go to App.js and use the following code:

   import React from "react";
   import "./App.css";
   import "leaflet/dist/leaflet.css";
   import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
   
   const styles = {
     mapRoot: {
       height: 400,
     },
   };
   
   export default function App() {
     return (
       <MapContainer
         style={styles.mapRoot}
         center={[51.505, -0.09]}
         zoom={13}
         scrollWheelZoom={false}
       >
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         <Marker position={[51.505, -0.09]}>
           <Popup>
             A pretty CSS3 popup. <br /> Easily customizable.
           </Popup>
         </Marker>
       </MapContainer>
     );
   }
   

5. npm start

I'm not sure whether I've set-up Leaflet wrongly in React or it's a bug from Leaflet or React Leaflet. Thanks in advance!

Answer 1

I faced Same Issues but found out this solution lately, all we need to do is pass an icon prop to the Marker component.

import marker from '../../Assets/icons/Location.svg';
import { Icon } from 'leaflet'
const myIcon = new Icon({
 iconUrl: marker,
 iconSize: [32,32]
})

<MapContainer center={value} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={value} icon={myIcon}>
        <Popup>
        Location :{data}
        </Popup>
      </Marker>
    </MapContainer>

Check My Solution on CodeSandBox!