【问题标题】：IconUrl asset URL in vuejs JavaScript codevuejs JavaScript 代码中的 IconUrl 资产 URL
【发布时间】：2018-08-10 14:57:09
【问题描述】：

我在尝试使用 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 Network 选项卡显示它尝试加载此 url： http://localhost:8080/assets/leaf-green.png

有什么想法吗？

【问题讨论】：

您是否检查了 chrome 开发工具中的“网络”选项卡以查看它尝试从何处加载它？
网络尝试加载：localhost:8080/assets/leaf-green.png 和 /assets/... 不起作用

标签： vue.js path vuejs2 leaflet

【解决方案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')

【讨论】：

你能告诉我怎么做吗？我试过 ../assets/leaf-green.png 和 ../../assets/leaf-green.png 但也不起作用
我可以在模板部分加载具有相对路径的图像，但我不能在 JS 部分中使用相同的 url：S
使用require()
这对我不起作用。根据我的学习曲线，32 金牌 acdcjunior 'Use require()' 的单字提示不适用。好的，我没有放弃并创建了另一个答案，我希望现在对我的 vue 知识水平的人有所帮助。

【解决方案2】：

好的，这些已经存在的最新版本并没有直接让我找到可行的解决方案。我检查了这个https://stackoverflow.com/a/50866199/845117 以获得正确的提示：

 const greenIcon = L.icon({
     iconUrl: require('./assets/leaf-green.png'),
     iconSize: [38, 95],
     iconAnchor: [22, 94],
     popupAnchor: [-3, -76]
 });

它是 ./assets、../assets 还是类似 ../../assets 的东西取决于您放置 .vue-组件的结构。
它与您要调用/引用它的路径相关。
据我了解，您总是必须从至少一个点开始。

【讨论】：