IconUrl asset URL in vuejs JavaScript code

Question

I'm having trouble trying to create a icon in Leaflet using Vuejs. It doesn't show the icon and I don't know how to fix the path. I have tried all the paths I can think of:

assets/leaf-green.png
/assets/leaf-green.png
../assets/leaf-green.png
../../assets/leaf-green.png
src/assets/leaf-green.png
../src/assets/leaf-green.png
../../src/assets/leaf-green.png

Code (Map.vue):

const greenIcon = L.icon({
  iconUrl: "assets/leaf-green.png",
  iconSize: [38, 95],
  iconAnchor: [22, 94],
  popupAnchor: [-3, -76]
});

Project structure:

DevTools Network tab shows that it tries to load this url: http://localhost:8080/assets/leaf-green.png

Any ideas?

Did you check the Network tab in chrome development tools to see where it tries to load it from? — FLeX
– FLeX, Commented Mar 2, 2018 at 11:42
Network tries to load: localhost:8080/assets/leaf-green.png and /assets/... didn't work — Sergio Tx
– Sergio Tx, Commented Mar 2, 2018 at 11:44

acdcjunior · Accepted Answer · 2018-04-09 15:37:01Z

1

/assets is not served. The images become src="data:image/png;base64,iVBORw0K...YII=" strings.

Solution: use relative path.

For example, say you have the following folder structure:

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

If you want to reference the image in MyComponent.vue, the path sould be ../assets.myImage.png

Check this demo codesandbox: https://codesandbox.io/s/610zwq4o6w?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue

Using from JavaScript

Use require('../assets/myImage.png')

edited Apr 9, 2018 at 15:37

answered Mar 2, 2018 at 11:47

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sergio Tx Over a year ago

can you tell me how? I've tried ../assets/leaf-green.png and ../../assets/leaf-green.png but doens't work either

Sergio Tx Over a year ago

I can load images with relative path in the template part, but I cannot use that same url in the JS part :S

acdcjunior Over a year ago

Use require()

Dirk Schumacher Over a year ago

This just did not work for me. With my learning curve the one word hint of 32-goldmedal acdcjunior 'Use require()' was not applicable. Ok, I did not give up and created another answer which I hope helps faster now for people of my knowledge level of vue.

Dirk Schumacher · Accepted Answer · 2021-12-17 12:10:54Z

0

Ok, these up to date already exisiting did not yield me straight to a working solution. I checked this https://stackoverflow.com/a/50866199/845117 to get the correct hint which is:

 const greenIcon = L.icon({
     iconUrl: require('./assets/leaf-green.png'),
     iconSize: [38, 95],
     iconAnchor: [22, 94],
     popupAnchor: [-3, -76]
 });

Whether it is ./assets, ../assets or even something like ../../assets depends on your structure where you place your .vue-components.
It is relative to the path from where you want to call/reference it.
As I understood you always have to start with at least one dot.

answered Dec 17, 2021 at 12:10

Dirk Schumacher

1,66721 silver badges43 bronze badges

Collectives™ on Stack Overflow

IconUrl asset URL in vuejs JavaScript code

2 Answers 2

Using from JavaScript

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using from JavaScript

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related