Browser Error: Plugin's Image not found

[cool]

plugin.json has this entry

	"staticDirs": {
		"static": "./static",
		"images": "./static/lib/leaflet/images"
	},

marker-shadow.png is residing in this directory : static/lib/leaflet/images

But this image is not displayed when the program is run. The browser reports this error:
GET http://localhost:4567/assets/images/marker-shadow.png 404 (Not Found)

I don't know how to fix this error.

[yariplus]

staticDirs are served from the plugins/nodebb-plugin-name route, not the assets route. So, the image will be on route http://localhost:4567/plugins/nodebb-plugin-name/images/marker-shadow.png

[cool]

So what shall I do to resolve this issue.. I mean where shall I specify this route ... in plugin.json? I think the NodeBB deafults to assets/images, I didn't specify this route explicitly anywhere.

[PitaJ]

If you specify "images": "static/lib/leaflet/images" in plugin.json, that directory will be exposed at /plugins/your-plugin-name/images

you have to run ./nodebb build for this to be set up though.

[cool]

Pita

I have the same setting in plugin.json. Whenever I make a change, I rebuild / restart the NodeBB everytime.

When I specified this setting in the plugin.son, the image was displayed immediately on the map. But I don't know what happened and the image went invisible and this error was back again.

[cool]

Any solution/hints ?

[cool]

A third-party vendor library, namely leaflet.js (and other files like leaflet.css and few images) is a part of this plugin.

The leaflet.css references certain images lying in the ./images folder (relative to leaflet.css) During the NodeBB build, the contents of the leaflet.css are minfied and merged in stylesheet.css.

And NodeBB creates this stylesheet in assets folder and therefore it expects to find the image in the http://localhost:4567/assets/images directory.

[cool]

This means that the build process should copy (or create a soft link) the images directory in build/public directory. This is because the stylesheet.css is in this folder.

How to accomplish this?

[cool]

I am right because I manually copied the images directory under the build/public directory and the icon image was there on the map.

But how to tell the build process about the same? Pl. guide.

If there is no proper answer to this problem, we should avoid minifying the leaflet's stylesheet. And it should be kept separate. In this scenario, how shall the plugin.json look like?