How to provide absolute filepaths in HTML

Question

I am attempting to load an image, located at

/tmp/sample.png

The image is there, and I can cd into the folder and see it. However when I type

<img src="/tmp/sample.png" alt="Sample Image">

The alternate text is displayed instead of the image. However, if I move the image to my current directory and use

<img src="./sample.png" alt="Working image">

This works perfectly.

What am I missing in the absolute filepath?

Note: I have tried

<img src "http://localhost/tmp/sample.png">
<img src "tmp/sample.png">
<img src "../../../../../tmp/sample.png>

with no luck. I have also attempted the strategies listed in the duplicate post, those do not work for me either.

Edit:

/

home

--> user

------>PycharmProjects

---------->webapp

-------------->dashboard

------------------>hud.html

tmp

--> sample.png

Hope this helps.

What do you mean by web root? tmp is under my root directory on my computer. If I use the command line and do cd /tmp and then ls.. sample.png appears — laddie_03, Aug 01 '19 at 17:29
Are you working in a framework environment or just plain html — Steve K, Aug 01 '19 at 17:29
This just means the tmp is not under your webroot, @j08691 is on the right track — Huangism, Aug 01 '19 at 17:29
@laddie_03 The directory that index.html (or whatever you have called it) lives in. — Hunter McMillen, Aug 01 '19 at 17:30
Are you running an actual web server, or just opening a file locally on your computer? — j08691, Aug 01 '19 at 17:30
@laddie_03 you have a file with some html in it that you are loading in your web browser locally. What folder is the html file in? and how does it relate to `/tmp/` — Hunter McMillen, Aug 01 '19 at 17:33
@HunterMcMillen, that folder is located further down the file tree. It's 3 or 4 levels below the root. Whereas tmp is at the root — laddie_03, Aug 01 '19 at 17:35
@StardustGogeta, no luck. Doesn't that imply that the tmp folder is in my current directory? — laddie_03, Aug 01 '19 at 17:36
@laddie_03 Yes, I'm sorry, I misread the question initially. Is it possible to use `src="../../../sample.png"` or something like that in this instance? — StardustGogeta, Aug 01 '19 at 17:37
@StardustGogeta no luck there either. I am able to cd to the desired location using that but the image still isn't appearing — laddie_03, Aug 01 '19 at 17:41
@laddie_03 Are you able to take a screenshot of the directory/file structure so that we can get a better idea of what is going on? — StardustGogeta, Aug 01 '19 at 17:41
can you open the src path in the browser? does it display the image? — SteinTheRuler, Aug 01 '19 at 17:44
@TheRuler I'm using a container so I don't know if that will work. But I tried it and no luck — laddie_03, Aug 01 '19 at 17:52
@StardustGogeta I cannot upload a screenshot of my file structure as I have changed the names of some of the folders and files for security purposes — laddie_03, Aug 01 '19 at 17:53
@laddie_03 Perhaps you inadvertently changed something between your version and the version you posted on StackOverflow, since otherwise I do not know what could be causing this. — StardustGogeta, Aug 01 '19 at 17:55
@laddie_03 if the image located at `/tmp` is related to your web app 3 or 4 levels down it _should_ be in that directory alongside the HTML. Many people create a folder called *images* for just this purpose. You would then reference those images with `...src="/images/."...` — Hunter McMillen, Aug 01 '19 at 17:55
@HunterMcMillen, the location of those images is predetermined and this HTML code cannot be moved to that location, it has a predetermined location as well unfortunately. So am I correct in thinking that html cannot access files above the working directory of the html file attempting to access? — laddie_03, Aug 01 '19 at 17:58
@HunterMcMillen, I know that it can work when it is in the same directory, I tried that earlier and mentioned it in my post. — laddie_03, Aug 01 '19 at 17:58
@laddie_03 No, that is not correct that HTML cannot reference files above the working directory. The `src="../../image.jpg"` style path should (and does) work if you have the right path written out. — StardustGogeta, Aug 01 '19 at 18:01
@StardustGogeta I see, I am just as confused as you then. Because if I go to the command line from the directory where my html code is and type "cd ../../../../../tmp" then type "ls" the sample.png appears. But when I include that exact same filepath in the HTML script nothing happens — laddie_03, Aug 01 '19 at 18:03
@laddie_03 That is quite odd. Unfortunately, without more information, I don't think I'll be able to help figure out what is happening here. (In regards to your edit, I am not the one who downvoted the question, but if I had to guess, I would predict it is because there is not enough info to be able to replicate the issue on our end.) — StardustGogeta, Aug 01 '19 at 18:05
You need to show an image or diagram of how the tmp folder is located in relation to your html file you are loading in your browser. Here is a sample one I found on the internets: http://www.javawebtutor.com/images/servlets/web_application.gif — dmikester1, Aug 01 '19 at 18:08
if you can't open the src, neither can the img tag. what kind of web server are you running? what happens if you try to open the Src without the filename? — SteinTheRuler, Aug 01 '19 at 18:15
@TheRuler, I'm not exactly sure what you mean. I can load images if they are in the current working directory or below the working directory in the file tree. — laddie_03, Aug 01 '19 at 18:16
@laddie_03 I think the issue is with the web server. how did you set up the project? — SteinTheRuler, Aug 01 '19 at 18:21
Simply put, when you set up a web address for a host/domain, you tell the web server at which path the root is. If yours is "webapp" (normally where you have the "index.html" located), then the "tmp" will not be accessible for web requests. If you create a folder under "webapp" (if that is the one) named "tmp" and place the image there, it will work with "/tmp/sample.png" — Asons, Aug 01 '19 at 18:22
@TheRuler, I am running this locally. I simply made an HTML file and launched the HTML file on my browser. — laddie_03, Aug 01 '19 at 18:27
@LGSon so absolute filepaths only work from the index.html file level and below? — laddie_03, Aug 01 '19 at 18:28
By default, yes, that is correct. If you want to store e.g. images elsewhere, you need read/stream them using server side tech, or setup an alias for such path. — Asons, Aug 01 '19 at 18:28
Based on your comment, running it using a local html file, you need to do something like `../../../../tmp/sample.png` — Asons, Aug 01 '19 at 18:34
@j08691 -- OP appears to run it locally...and not saying until now https://stackoverflow.com/questions/57314121/how-to-provide-absolute-filepaths-in-html?noredirect=1#comment101121885_57314121 ... so closed it + downvote from me — Asons, Aug 01 '19 at 18:37
@LGSon, I've already tried that. Earlier in the comments. Also, in my post I have localhost mentioned. I don't quite understand the downvote? — laddie_03, Aug 01 '19 at 18:43
Launching a html file in the browser, locally, is not the same as `localhost`. `localhost` on a Windows PC is running as a web server (IIS), and with that my comment (and dupe link) explains it. The downvote is because you provide different info to use when we ask, and haven't properly explained how the html file is served. — Asons, Aug 01 '19 at 18:51
@LGSon I have answered the questions to the best of my ability. If I had a deeper understanding then I wouldn't be asking for help. I am a beginner to HTML development. — laddie_03, Aug 01 '19 at 18:52
@LGSon, I had previously looked at other posts on StackOverflow with no success, hence this post. My apologies for not making that clear. — laddie_03, Aug 01 '19 at 18:53
I understand that, still, to make use of the answers you get here, one need some basic understanding, if one doesn't have that, one need to start with it. SO is not a tutorial site in that way. In this comment of mine https://stackoverflow.com/questions/57314121/how-to-provide-absolute-filepaths-in-html#comment101121746_57314121 I explained how-to, if using a web server (which `localhost` indicates you use). The dupe link go somewhat deeper with how to write a path. With basic knowledge you will make something out of those. — Asons, Aug 01 '19 at 18:59
If you on the other hand simply double click on a html file, it will open as a local file (the address in the browser will look like `file:///C:/path/index.html`), and that is not the same as `localhost`, which looks like `http://localhost/index.html`. If that is the case, the `/../../../tmp/sample.png` should work, though you need to make sure you have the correct amount of parent directory set `../` — Asons, Aug 01 '19 at 19:10

score -1 · Answer 1 · answered Aug 01 '19 at 18:40

-1

try:

<img src="tmp/sample.png" alt="Sample Image" />

Skip the "/" at the start, since you have no web server and a root directory.

answered Aug 01 '19 at 18:40

SteinTheRuler

3,549
4
35
71

No luck, I've tried that – laddie_03 Aug 01 '19 at 18:51

How to provide absolute filepaths in HTML

1 Answers1