-1

I'm trying to load SVG image from JSON file that contains a path like this -

<img src="../images/filename.svg"/>

and the image doesn't load.

When i try to do this it works- 

<img src="/static/media/filename.9f72c13b.svg"/>

What is the difference? Why does the second work and the first doesn't ? Is there a way to change all of the first paths to be like the second?

Thank you!

Roi Ravia
  • 1
  • 1

1 Answers1

1

../ in a path means one level up from the current folder. So your first path is a relative path, and the second one is an absolute path. Besides, those are pointing to 2 different file-names (filename.svg and filename.9f72c13b.svg). First, you need to figure out to which file you want to refer, and then make sure it's present in that your specified location.

Is there a way to change all of the first paths to be like the second?

Yes, you can just use a simple text-replacing feature of your text-editor, say for example notepad++ which can do replace text with regular expressions and in multiple files simultaneously.

A note about the 'current directory': it's a bad idea to rely on assumptions about it, because on some platforms it may not be what you want, or it may even change from version to version.

Hack06
  • 963
  • 1
  • 12
  • 20
  • i accessed the absolute path when i imported from the current directory. is there a more efficient way to get all absolute paths rather than just importing one by one? – Roi Ravia Jun 02 '20 at 10:33
  • I have no idea, but take a look at this: https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js maybe it'll answer to your question(s). – Hack06 Jun 02 '20 at 15:15
  • You're welcome. Consider voting and accepting my answer ;) – Hack06 Jun 03 '20 at 09:54