javascript - 如何使用 require 导入带有 react leaflet 的自定义图标？

Question

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

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

但图像不会在 map 上呈现。

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

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

Answer 1

您不应该将 require 放在 '' 之间:只有 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]
});

Demo