Vue // 如何从 js 方法指向 assets 文件夹？答案

【问题标题】：Vue // How to point to assets folder from js method?Vue // 如何从 js 方法指向 assets 文件夹？
【发布时间】：2019-03-07 10:02:52
【问题描述】：

我有一个由 vue-cli v3 生成的 vue 项目，我正在尝试为 markerclustererplus v3 提供自定义标记，但它不起作用！

我已经放置了包含所有 m{1-5}.png 图像的“m”文件夹，并向 MarkerClusterer imagePath: "/assets/m/m" 提供了 imagePath 选项，但我得到的只是表示图像加载失败的图标。图标的路径似乎是正确的，http://localhost:8080/assets/m/m2.png

到目前为止，我已经尝试将“m”文件夹移动到 public 和 components 文件夹，但它也不起作用。如果我从浏览器地址栏中打开 http://localhost:8080/assets/m 文件夹或其中的文件，也无济于事。我也没有在浏览器的源选项卡上看到任何图像。

更新：

根据markerclustererplus 文档imagePath 属性是一个字符串，它是：

用于集群图标的一组图像文件的根名称的完整 URL。完整文件名的格式为 imagePathn.imageExtension，其中 n 是图像文件编号（1、2 等）。默认值为 MarkerClusterer.IMAGE_PATH。

所以我不能只使用 require('/folder_path/')，因为我没有调用某些 Cluster 类型所需的确切 .png，我不能将图像数组传递给 imagePath 属性，因为它是一个字符串。

这是我的src 目录树：

.
├── App.vue
├── api.js
├── assets
│   ├── logo.png
│   └── m
│       ├── m1.png
│       ├── m2.png
│       ├── m3.png
│       ├── m4.png
│       └── m5.png
├── components
│   ├── google-map.vue
│   └── side-bar.vue
├── dummyData.js
└── main.js

我将imagePath: "/assets/m/m" 选项传递给google-map.vue 文件中的MarkerClusterer，它会在浏览器中生成<img src="/assets/m/m2.png"> 元素。

【问题讨论】：

你能告诉我们你的项目结构吗？查看您的文件夹的组织方式。问题可能出在你的路上。
@MiguelCruz 我已经更新了这个问题。请检查一下
同样的错误...

标签： google-maps vue.js markerclusterer

【解决方案1】：

要引用资产文件夹中的文件，请使用@。您的图片路径应如下所示：

<img src="@/assets/m/m2.png">

【讨论】：

【解决方案2】：

对我有用的方法是将图像放在/public 目录中的文件夹中，然后将imagePath 设置为该文件夹。所以你有：

public
  map-cluster-images
    m1.png
    m2.png
    m3.png 
    .....

然后当你发起MarkerClusterer:

imagePath: '/map-cluster-images/m'

【讨论】：