我在尝试使用Vuejs在Leaflet中创建图标时遇到了麻烦。它没有显示图标,我也不知道如何修复路径。我已经尝试了所有可以想到的路径:
assets/leaf-green.png
/assets/leaf-green.png
../assets/leaf-green.png
../../assets/leaf-green.png
src/assets/leaf-green.png
../src/assets/leaf-green.png
../../src/assets/leaf-green.png
代码( Map.vue ):
const greenIcon = L.icon({
iconUrl: "assets/leaf-green.png",
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
});
项目结构:
DevTools网络标签显示它尝试加载此网址: http://localhost:8080/assets/leaf-green.png
有什么想法吗?
答案 0 :(得分:1)
/assets
未送达。图像变为src="data:image/png;base64,iVBORw0K...YII="
个字符串。
解决方案:使用相对路径。
例如,假设您有以下文件夹结构:
- src
+- assets
- myImage.png
+- components
- MyComponent.vue
如果您想在MyComponent.vue
中引用图片,路径应为../assets.myImage.png
检查此演示代码框:https://codesandbox.io/s/610zwq4o6w?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue
使用require('../assets/myImage.png')