Javascript 如何使用react传单导入自定义图标？

我在stackoverflow上读过几篇文章 和 介绍如何在react传单地图中包含自定义图标。我已经尝试了下面的代码

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]  
    })

---

您不应将

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>
  );
}

然后像这样使用它：

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

---

谢谢@Kboul，但是

require

引号之间是我帖子上的错别字，我修正了它。不管怎样，我以前试过你的建议，但仍然无法在地图中渲染图像。我只是得到了无图像可用的图标。我不确定这是否是我的软件包的问题。你尝试过第二种方法吗？如果你能为你的应用程序提供一个演示，我可以提供帮助。

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