时间戳

首页 > 解决方案 > Vue // 如何从 js 方法指向 assets 文件夹？

google-maps - Vue // 如何从 js 方法指向 assets 文件夹？

问题描述

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

我已经放置了包含所有 m{1-5}.png 图像的“m”文件夹，并向 MarkerClusterer 提供了 imagePath 选项，imagePath: "/assets/m/m"但我得到的只是表示图像加载失败的图标。图标的路径似乎是正确的，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"在文件中将选项传递给 MarkerClusterer google-map.vue，它会导致<img src="/assets/m/m2.png">浏览器中的元素。

标签： google-mapsvue.jsmarkerclusterer

解决方案

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

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

然后当你启动MarkerClusterer：

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

推荐阅读