<div class="slide__Show1">
<h2>It's More Than Just A Sport</h2>
<p>Get back on the field in style!</p>
<img src='../E-commerce/IMG/Soccer.jpeg'>
</div>
Live server works as a real (remote) server, and looks for the image like a real server would do: Not on your local machine, but relative to the project root on your "server".
When you open a local HTML file on your computer/in your browser, it is able to look for the image file locally anywhere on your computer, and thus is a bit easier to satisfy.
So there's a slight difference which types of URLs/paths you can use in a local file and a file that is supposed to work on a server.
In your case, you need to use either an absolute path or a relative path.
Absolute path: https://examplesite.com/assets/img/soccer.jpg
Relative path: /assets/img/soccer.jpg
Your relative path goes one level UP (out) from the root folder of your project (because of ../) and searches for a file that is probably outside your website folder, in the E-commerce directory.
Related
I'm making a nodejs page to show as an management page.
I need to access a directory outside root directory.
But I can't access with relative path.
Directory example is like this.
C:\resultDirectory\projectA
C:\resultDirectory\projectB
C:\reportDirectory\ProjectA
C:\reportDirectory\ProjectC
C:\NodejsRootDIrectory
What I want to do for now is Access a file in subdirectory of "C:\resultDirectory\projectA". But at the end, I need to access them all. So I can't make webpage root to project A's directory.
What I've dont to access was relative path. sample is
$('#report').load("../../../ProjectA/Daily/DailyReport_191001_151843.html");
I've checked number of "../" and tried add and subtract several times.
For now, this is only code relative to access files.
$('#report').load("../../../ProjectA/Daily/DailyReport_191001.html");
When I check chrome's error, there is only 404 error. the browser can't find out the file I want to see.
I have a website that can have images in varying directories. I'm
running Linux and some of the images can be in /tmp/ while others in a directory that isn't within the codebase's one. So for example, I have:
/tmp/
/home/work/codebase/htmlfiles
/home/stuff/stuff/images
The code I'm using to try and access these directories is this:
<img src="' + path + image + '">;
Where path is the directory and image is the filename. Path does end
with /. Currently it will just give 404 errors even when I have
confirmed that there is such a file in that directory.
Am I missing something? Does HTML not allow you to navigate from the
root directory?
Your web server presents the files based from a web root directory.
So if your website is in /home/stuff/stuff the webserver does the following translation:
/index.html -> /home/stuff/stuff/index.html
/images/image1.png -> /home/stuff/stuff/image1.png
/tmp/ -> /home/stuff/stuff/tmp/
To do otherwise would be a massive security risk, allowing any online user to pull arbitrary files from your system.
There are a few possible solutions to this, what is best will depend on your situation.
You can map web paths to different paths on thy system
http://httpd.apache.org/docs/2.0/mod/mod_alias.html#alias
You can symlink the directories holding your images into the webroot. Ensure that you allow the webserver to follow symlinks.
https://superuser.com/questions/244245/how-do-i-get-apache-to-follow-symlinks
You can also hard link the files to exist in the webroot, you can use a serverside scripting language, or simply move the files.
How can I use absolute paths in my website while testing on my local filesystem? I know that I can use / to access the root directory of my website. However, this works only when my website is on the server. I want to be able to use absolute paths on my local filesystem so that I can do proper testing before uploading.
Is there a way to set a variable to a root directory in HTML? Something similar to Linux where you can define a variable WEBPATH=/home/user/website. Thus I can use e.g src="WEBPATH/folder/file.html for all the files I use in my website and I can modify WEBPATH depending on whether I am testing locally or using the server root folder.
I am open to other workarounds as well.
I'm assuming you're using a file url to access your HTML in the browser, in which case an easy way to get absolute paths working is by using a local webserver to serve your site.
If you have Python 3 installed, you can run python3 -m http.server from the command line at your web root, and it will serve your site at localhost:8000.
I have this structure for my project:
Root Directory
|-css folder
|-style.css
|
|-it folder
|-index.html
If I try to include css file with:
<link href="/css/style.css" rel="stylesheet" type="text/css"/>
from index.html, aptana preview and also internal server can not find style.css.
Why is this?
In my remote server it works perfectly and I do not want to use a relative path.
In terms of the "why", the problem you are having is related to how your development server is setup versus your production server.
Assuming a standard setup, your production server will receive requests for a domain (i.e., http://mysite.com) that is, for lack of a better word, mapped to a folder on your server (i.e, a request to http://mysite.com will be mapped to a folder, /var/www/mysite, on your server).
So, when you link to a style sheet with /css/style.css, your (production) sever immediately goes to the /var/www/mysite folder and starts looking for the css folder, file and so on. No problems with that, as you point out.
Your development machine, however, is serving up pages locally and has a different directory structure for mapping to files and folders.
When I open an HTML page in my Aptana project and hit the preview button, Studio loads http://127.0.0.1:8020/mysite/public/404.html (note how the first folder after the IP and port is mysite). To load the absolutely pathed CSS file, the local server is actually looking for http://127.0.0.1:8020/css/styles.css but it needs to get to http://127.0.0.1:8020/mysite/css/styles.css.
The initial "/" in your link (/css/styles.css) tells the server to go to the root directory of the server and start looking for the folder and files from that point ... but there is no css folder in the local server's root directory. It lives in /mysite/css/styles.css and that's why fskreuz suggests relative paths and using "../css/styles.css" instead.
Personally, I prefer absolute links (but that's just a personal preference and not in any way a challenge to or comment upon fskreuz's response). However, my local development setup is conducive to using them because I setup virtual hosts for the sites I work on. Using Apache, I setup a virtual host for each of my projects. With this, I can load something like http://dev.mysite.com in any browser on my computer and test my site/app in a way that makes it mirror my production setup.
Just started a site and I have an /img directory on the main domain. I would like to set up a subdomain(where the file folder is just another one in the main directory) that is able to use the /img folder but it doesn't work.
The /img and /subdomain folders are on the same level, so to display images in the main domain I type: <img src="img/image.jpg">
and for the /subdomain I type: <img src="../img/image.jpg">
and I get a 404 error for the site: http://subdomain.example.com/img/image.jpg
As you can see, I want it to be linking to http://www.example.com/img/image.jpg
Can anyone tell me how to achieve this? I would prefer not to link images to their internet directory (i.e. http://www...) because I would like to modify the sites on my computer and upload them via ftp.
I'm sure it's just something that I am messing up or don't completely understand. Thanks in advance!
Relative paths are always relative to a URI. If you have a page at http://subdomain.example.com/ containing a link to ../img/image.jpg, the web server translates it into a link to http://subdomain.example.com/../img/image.jpg. Obviously the web server can't serve anything above it's root directory (that's the whole point of having a root).
Your webserver is configured to only serve content in the /subdomain directory, but obviously /img is not inside that directory, and can't thus be served. What you need to do is configure your webserver to look in /img (the directory on your filesystem) instead of /subdomain/img when it gets an request for any content at http://subdomain.example.com/img/
With Apache this can be done with mod_alias.
Summary: Use mod_alias to map requests to http://subdomain.example.com/img/ to the directory /img.