IconUrl vuejs JavaScript代码中的资产URL

Question

我在尝试使用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

有什么想法吗？

Answer 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

使用JavaScript

使用require('../assets/myImage.png')