path directory not working? - html

I've finished up my website and I'm trying to clean up the files. I've put all my images in a folder called images and I'm trying to set up the path directory from the root folder but to no avail. As far as I can tell I'm doing nothing wrong?
<img src="images/logo.png">
The root folder contains the html file with logo inside it and another folder called images with logo.png inside it.
Would anybody know what the problem is?
All help really appreciated!

The path is right but if you are using a url rewrite like engine htaccess the paths may be problematic, then you can set an absolute path instead of a relative:
<img src="/images/logo.png">

The issue looks like relative paths, so instead of:
<img src="images/logo.png">
try
<img src="/images/logo.png">
In the suggested approach notice the leading forward slash /
You may find the following useful: http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

Related

Relative image path not working(HTML)

I cant seem to get my image to display on my webpage using a relative path. Im using the program "brackets" to do all of my editing before uploading to the webpage. Below is the relative path that i'm using and when I hover over the path the image thumbnail displays. but it still wont display on the page... am I missing anything? please and thank you.
<img id="01" class ="tn leftcol" width = "150" height = "150"
src=".//Images/IMG_3604.JPG" alt="1" />
there are two slashes. this can be interpreted as a protocol. Change the src to Images/IMG_3604.JPG
If this is being populated via a variable, check the source text or environments
There are two forward slashes. It should be ./Images/xxxxx.png not .//
If you have to go out of a directory, use ../ if the image folder is in the folder you are currently in use nothing.
Src="Images/IMG_3604.JPG"
Your html file is in the same directory.
Src="../Images/IMG_3604.JPG"
Html file is in a subdirectory and you need to go outside of that folder to get to images.
Src="../../Images/IMG_3604.JPG"
Html is in a subdirectory of a subdirectory and you need to go outside of both to get to the Images folder.
Hope this helps.

One file .html with css style and images inside

I have the index.html file, where iside I put CSS as inline style. I'd also have inside links to images, not to path to images. Finally, I'd like to have index.html file which will contains evrything inside as one file. How can I make not to get images from computer path but have a links to my images?
Thanks for help!
If I understand you correctly, you are seeking to build one huge file "index.html" which contains all the information needed to display what you want to display.
Think that this is something extremely unusual. Why would you need that? Probably there are better ways to achieve what you want to achieve.
If you really want to go for it, ideas that come to mind are:
* use simple graphics in form of .SVG images, these can be described with the HTML SVG tag
* use compiled HTML (.CHM) (https://en.wikipedia.org/wiki/Microsoft_Compiled_HTML_Help) - but not for the web...
when u want to call image from outside then call like below when you use http in url it will never look for local file path
<img src="http://www.domainname.com/yourimage.png" alt="image">
You can make a folder like images where is your index.html then put your all images in images folder & link your images like this
<img src="images/logo.png" />
This is folder path not from your computer, When you will upload it then this path will be automatically global
or you can use direct link from server like this:
<img src="https://www.example.com/logo.png" />
The best way would be to include all files relationally in a /images folder however if you need a one file solution then you could encode the images in base64 and use that in the src=""

Find image path using html

This is the path of my html file ie test.html
/var/www/html/1/2/3/4/5/6/7/8/9/test.html
i want images from this path:
/var/www/html/1/2/3/4
How i able to do in img tag, src attribute.
You should take a look at Absolute and Relative Paths
in your case writing <img src="."/> is your current path so it's equivalent to /var/www/html/1/2/3/4/5/6/7/8/9/test.html (. means current directory)
now you can go some directories up using ".." so you can move up to your desired path using this method : <img src="../../../../../img.jpg">
These two methods are called Relative paths and that's what you should use in your websites since you can sometimes have to migrate your website and absolute paths wouldn't work anymore
For example if you write
<img src="http://html/1/2/3/4/img.jpg"/> it would still work but only if your site is named "html" and the directory logic stays the same
hope it helped !
Hope i understand your question.
The path should be like this
../../../../../img.jpg
each ../ will take you back to one folder .. Could you try this..
Use relative path, .. means dir up, so the path in index.html to img.jpg has to be:
<img src="../../../../../img.jpg">

Path to image within multiple directories

I'm having problems linking to an image from a file in a subdirectory.
File structure is something like this:
..main-theme/parts/shared/header.php
..main-theme/images/logo.png
Within header.php I want to link to the logo.png image
<img src="images/logo.png"/>
I've tried every option I can think of of ../ that would make sense to climb from header.php but cannot work out what I should be doing as they always jump too high up into directories above main-theme
<img src="../../images/logo.png"/>
Edit, since you mentioned that you are using WordPress:
<img src="<?php bloginfo('template_directory'); ?>/images/logo.png"/>
I believe that is the correct way to handle this within WordPress. It has the benefits of using an absolute path, but will automatically adjust when you move the project from localhost to a live domain.

Web Folder Structure

I am working on a code where all the images are referred with a preceding "/"
eg:
<img alt="" class="repositioned" src="/images/top-b-strip.jpg" />
I have a wamp server where I run the code and find that image is not coming correctly until I remove the prceeding "/" before images.
<img alt="" class="repositioned" src="images/top-b-strip.jpg" />
Can anybody explain anything I am missing here?
Putting a "/" at the start of your path denotes that it's absolutely situated at the root of your server. For instance, http://www.example.com/images/top-b-strip.jpg, where as you may actually have them as http://www.example.com/somesubaccount/images/top-b-strip.jpg.
You can read more about absolute versus relative paths at, for instance, http://www.communitymx.com/content/article.cfm?cid=230ad
/images/top-b-strip.jpg is an absolute path, where you need to use a relative path (without the first /).
This means that images is actually a subdirectory of the directory where your html file is, while if you use the absolute path, the images folder is supposed to be a subfolder of the root directory of the file system.