如何解决如何使用require导入带有反应传单的自定义图标?
我在这里阅读了关于stackoverflow的几篇文章,例如React Leaflet - How to render custom image using Circle Markers 和 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',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='© <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,30]
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。