Welcome to the CSC Q&A.
Get help and give help!
Write great code!
It is our choices... that show what we truly are, far more than our abilities.


+12 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 (8 points)

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 (8 points)