反應傳單標記壞了

Question

我嘗試使用 react-leaflet 在我的 react 應用程序上顯示地圖，並且我做了基於文檔的操作，但是由於某種原因，我的標記壞了，這是我的代碼

const foodIcon = new L.icon({
        iconUrl: require('../images/makanan.png'),
        iconSize: [35,45]
    })

    const position = [51.505, -0.09]


               <div id="map">
                      <div className="map-container">
                            <MapContainer style={{ width: '100%', height: '600px' }} center={position} 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={position} icon={ foodIcon }>
                                <Popup>
                                    Hello
                                </Popup>
                                </Marker>
                            </MapContainer>
                       </div>

Answer 1

仔細檢查圖像路徑以及圖像是否在正確的位置。 為我工作。

演示