Question

我有一个由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 /'），因为我没有调用某些集群类型所需的确切.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">元素。

Answer 1

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

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

Answer 2

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

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

然后当您启动 MarkerClusterer 时：

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

Vue //如何从js方法指向资产文件夹？

2 个答案: