Way to serve and access all files from assets folder

[rreckonerr]

What problem does this feature solve?

I have a vue project generated by vue-cli v3 and I'm trying to provide custom markers for markerclustererplus v3, but it won't work!

I've placed "m" folder containing all m{1-5}.png images and provided imagePath option to MarkerClusterer imagePath: "/assets/m/m" but all I get is icon representing failed image loading. Icons have a path that seems to be correct, http://localhost:8080/assets/m/m2.png

So far I've tried to move "m" folder to public and components folder, but it doesn't work either. It also doesn't help if I open http://localhost:8080/assets/m folder or files in it from the browser address bar. I also do not see any images at the source tab of the browser.

According to markerclustererplus documentation imagePath property is a string which is:

The full URL of the root name of the group of image files to use for cluster icons. The complete file name is of the form imagePathn.imageExtension where n is the image file number (1, 2, etc.). The default value is MarkerClusterer.IMAGE_PATH.

So I can't just use require('/folder_path/'), because I'm not calling exact .png that is needed for certain Cluster type and I can't pass Array of images to imagePath property, because it's a string.

Here's my src directory tree:

.
├── 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

I'm passing imagePath: "/assets/m/m" option to MarkerClusterer in google-map.vue file, it results in <img src="/assets/m/m2.png"> element in browser.

What does the proposed API look like?

I have no idea how to implement this.

[LinusBorg]

Since these assets won't be processed by webpack, you should put them in the /public directory instead.

That folder's contents are all copied to /dist during by build.

You can read more about it in the docs, we have a chapter about handling static assets.

[ChrisMcHarvey]

Hey @LinusBorg, I've implemented a similar solution in my project to display images from a folder of proxies and think you might be able to help with my issue. The way it's currently implemented, the folder's contents are all copied to /dist during the production build which means that I can't add any new files to that folder once the build has been run.

This also creates the issue that any time a new proxy is added to the folder while running in dev mode, the project is recompiled so if I'm running a script that continually creates proxies and adds them to the folder, my project is constantly recompiling making it useless.

Do you have any idea of how to get around this in vue?

Thanks,
Chris