-1

I am trying to include an image that is in a local folder. When I try to load it standalone(not served from a server) it breaks. When I load it from a server it has no problem. If both point to the same location what is the deal?

ex:

<img src="/img/example.png"> vs <img src="./img/example.png">

1 Answers1

1
  • You would use ./ when you want the path to start from the current path. This is often called a "relative path".
  • You would use / when you want the path to start from the root path. This is often called an "absolute path".

Note that in this case "path" is the URL components from the site root to the resource name, it has nothing to do with file system paths.

When I try to load it standalone(not served from a server) it breaks. When I load it from a server it has no problem.

I don't know what you mean by "not served from a server", but both of the src values you demonstrate are relative URLs. If you mean that you're trying to open the page from the file system and not from a web server then note that ./ has pretty much the same meaning in file systems, but / does not. Depending on the file system, it may mean the root of the entire file system or it may mean nothing at all and just be an error.

If both point to the same location what is the deal?

If one is failing and the other is not then they both do not point to the same location. You can open your browser's debugging tools and observe the requests made to load the image resources. Those requests would include the full URL (or file system path?) being requested by the browser, so you can see how your src values translate into actual requests.

As an aside, if you're trying to open the page from the file system then the short answer is... don't do that. It "works" for simple functionality, but a file system is not a web server. For any reasonable web development it's best to serve the content from a web server. (Which can of course be on your workstation for local development.)

David
  • 208,112
  • 36
  • 198
  • 279
  • Thanks, that was very helpful. The issue was similar to what you said where the path was interpreted differently (or not at all) causing things to break. And yes I do not usually use the file system to preview XD – Eternal_plasma Oct 08 '21 at 14:24