Welcome to the CSC Q&A, on our server named in honor of Ada Lovelace. Write great code! Get help and give help!
It is our choices... that show what we truly are, far more than our abilities.


+13 votes

I'm using a Polyline from google API to create a route on the map. I know that I can only use .svg formatted image for my icon. I created a custom icon that is saved as .svg and I put it into our public folder. When I tried to access it as public/img.svg or /img.svg it's not working.
Here is googles example https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow
I'm changing the path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW to my custom path but it's not working.

asked in CSC490_Spring202021 by (1 point)

Can you please provide the snippet of code you're having trouble implementing?

1 Answer

+2 votes

To access the public folder, you would either have to use "%PUBLIC_URL%/your_files" or process.env.PUBLIC_URL.

For example:

import SomeSymbol from '%PUBLIC_URL%/SomeSymbol.svg';
<img src={process.env.PUBLIC_URL + '/SomeSymbol.svg'} />

However, I'd encourage you to create a folder inside the src folder and import your assets there.

More info: https://create-react-app.dev/docs/using-the-public-folder/

answered by (1 point)