javascript - 如何使用要求导入带有反应传单的自定义图标？

Question

我在 stackoverflow 上阅读了几篇文章，例如React Leaflet - How to render custom image using Circle Markers and custom marker icon with react-leaflet 关于如何在反应传单地图中包含自定义图标。我试过下面的代码

const newicon = new L.icon({
      iconUrl: require('../assets/Download-Image.png'),
      iconSize: [30, 30]  
    })

但图像不会在地图上呈现。

但是，如果我使用与下面相同的图标的 url，它可以工作并呈现。关于我可能做错什么的任何建议？

const newicon = new L.icon({
      iconUrl: 'https://www.somewebsite/Download-Image.png',
      iconSize: [30, 30]  
    })

Answer 1

您不应该require在'': 之间放置只需要内部的图像路径。

const newicon = new L.icon({
  iconUrl: require("./assets/marker.png"),
  iconSize: [30, 30]
});

export default function App() {
  const position = [51.505, -0.09];

  return (
    <Map center={position} zoom={13} style={{ height: "500px" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={position} icon={newicon}>
        <Popup>
          A pretty CSS3 popup.
          <br />
          Easily customizable.
        </Popup>
      </Marker>
    </Map>
  );
}

另一种最常用的方法是导入如下图像：

import marker from "./assets/marker.png";

然后像这样使用它：

const newicon = new L.icon({
  iconUrl: marker,
  iconSize: [30, 30]
});

演示