HTML file location and mess.png file location in parent directory
I am trying to link an image to my HTML project using the relative path from the HTML file. The HTML file is in a directory that is the child of the directory that the png file is in. My understanding is that src="../mess.png" should work because I'm moving to the parent directory which contains the image file. However this has not worked and I can't figure out why.
here is an image of the code I am using
I understand it's best practice to have the image in the same directory as the HTML file, or in a folder within the directory of the HTML file.
Related
I have a template.html file and am loading it like this:
I am trying to include an image using the HTML img tag. The relative path is correct. I have tried putting the image in the same directory as template.html but it is not finding it. How can I include an image in the template.html file?
shiny will make available any resources in a folder named www/, in the same location as your app.R or ui.R/server.R files.
Create a folder named www/ and put the images folder in there and that should resolve it.
relative file path explanation
in the above website, the following example is given to demonstrate relative file path for the image: <img src=”banana.jpg” and there is no / in front of banana because the "image is placed at the same directory where source file is"
in the html tutorial on youtube (1:13:01) that i'm learning from, the images are also placed at the same directory where source file is but a / is used in front of the image name. why was / used here?
Does it have to do with "root of the current web" as stated in the w3 html file path tutorial? If yes, what does "root of the current web" mean? i can't find any explanation that relates to html
A File Path is a concept used in HTML to define the path of the file into the respective website’s folder structure.
It’s an important thing to know the path of files which are going to include in web pages.
Examples
In html here is a syntax to include image files in webpages
keep in mind that the img tag is used to insert images as followsand to insert image file in a web page its source must be known.
<img src ="path" alt ="some text here">
/*
alt attribute is used to specify an alternate text for an image, if the image cannot be displayed
path describe the location of the image file in a website folder.
*/
Different ways to specify file paths are
<img src=”img_name.jpg”>:
//It specify that our image is located in the same folder as the current page.
<img src="images/image_name.jpg">
//It specify that our image is located in the images folder in the current folder.
<img src="/images/image_name.jpg">
//It specify that our image is located in the images folder at the root of the current web.
<img src="../image_name.jpg">
//It specify that our image is located in the folder one level up from the current folder.
In the above example, the public_html folder is the root directory of the website and the index.html file is executed when someone navigates to the homepage of the site (www.example.com).
Hops you' have get an idea
The explanation is available at Difference between links with forwards slashes and relative links
It is going to be easier to understand the concept if the image is located in another folder rather than the main root. For instance, a folder named as "img"
So in your example, <img src=”img/banana.jpg”> indicates that
This would start in the same folder as the current HTML file, then in the img folder, then for the file itself.
<img src=”/img/banana.jpg”> indicates that
This would look at the root of the site's hosting, then find an img folder, then for the file itself.
<img src=”../img/banana.jpg”> indicates that
This would start in the same folder as the current HTML file, then go "back" one folder into the parent folder, then look for a img folder, then for the file itself.
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
Here is the path I am working with - /public_html/websystems/websystems.css
The HTML file I am trying to link is in the public_html directory and named index.html
The CSS file I am trying to link is in the websystems directory and named websystems.css
The contents of the files are shown in the images below.
HTML file
CSS file
Why are none of the styles I've set in my CSS file applying to my HTML file?
Thanks for your help.
Try this,
websystems/websystems.css
Note that, (taken from Quick Reminder About File Paths)
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories.
Relative file paths give us a way to travel in both directions. Take a
look at my primitive example:
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
Change the /websystems/websystems.css to just websystems/websystems.css and see if that works. That's a path relative to the current path of index.html.
I need a background image on my website. I've set it on my .CSS file, which is in a sub-folder. The background image only works if I put the .CSS file on the main website's folder.
I have those folders:
_src (html files source)
_src/_img (where all the images are stored)
_src/_css (where I've put the style.css)
In the head section of my HTML file I use the href equals to _src/_css/style.css
**In the body section on my .CSS file I set the background-image the url _src/_img/red_lines_bg_texture.jpg.
If I move the .CSS file to the Website's root the background image works.
Strangely enough, everything else works on the .CSS file, except - again - the background image.
Any help would be really appreciated.
URLs in CSS are always relative to the .css file unless otherwise specified, for instance, with a beginning slash as in "/imgdir/img.jpg"
Your background image can be set with an absolute url like this
background-image: url('/_src/_img/red_lines_bg_texture.jpg');
with a beginning slash to specify that you are giving a path relative to the root, rather than relative to the .css file.
I've got the solution.
I have the following directory structure relative to the root:
/_src
/_src/_css
/_src/_img.
CSS files only acccess folders RELATIVE TO ITS OWN LOCATION, so in order to access files in _img folder we should use the relative path, like this:
background-image:url("../_img/red_lines_bg_texture.jpg");
It finally works.
Thanks to everyone who tried to help.