Best IT Recipes

HTML - selecting Root folder images from a subfolder

let's say the following DIR structure of my site DIR STRUCTURE

Now in index.html I can just reference images like

 <img src="./images/logo.png">

but what if i want to pass the same fron sub.html image what will be src

+50
html reference directory subdirectories src
07 Sep 2018-10-09T00: 00Z
source share
7 answers
 <img src="../images/logo.png"> __ ______ ________ | | | | | |___ 3. Get the file named "logo.png" | | | |___ 2. Go inside "images/" subdirectory | | |____ 1. Go one level up
+68
Sep 07 2018-10-09T00:
source share

../images/logo.png will return you one folder.

../../images/logo.png will return two folders to you.

/images/logo.png will return you to the root folder no matter where you are located /.

+71
Sep 07 2018-10-09T00:
source share

Relative link will be

 <img src="../images/logo.png">

If you know the location relative to the server root, this may be the easiest approach for an application with a complex hierarchy of subdirectories - it will be the same of all folders.

For example, if your directory tree indicated in your question refers to the server root, then index.html and sub_folder / sub.html will use:

 <img src="/images/logo.png">

If the image folder is located in the root directory of an application of type foo below the server root (for example, http://www.example.com/foo ), then index.html ( http://www.example.com/foo/index.html ), for example, sub_folder / sub.html ( http://www.example.com/foo/sub_folder/sub.html ) both use:

 <img src="/foo/images/logo.png">
+6
07 Sep '10 at 0:50
source share

Your index.html can simply do src="images/logo.png" and from sub.html you would do src="../images/logo.png"

+3
Sep 07 2018-10-09T00:
source share

../ moves one folder up the directory tree. Then select the desired folder and its contents.

 ../images/logo.png
0
Jun 25 '15 at 10:36
source share

when you upload files to the server, be careful that some of your images will not be displayed on the web page, and an emergency icon will appear, which means that your path to the file is incorrectly ordered or encoded, if you have the following file structure, the code should be like this File structure: -> web (main folder) → images (subfolder) → logo.png (image in a subfolder) below is the code below

  <img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

if you uploaded your files to the web server, neglecting the file structure without creating a web folder, if you upload files directly, then your images will be broken, you will not see the images, and then change the code as follows

  <img src="images/logo.jpg" alt="image1" width="50px" height="50px">

thanks-> vamshi krishnan

0
Dec 03 '16 at 5:29
source share

when you upload files to the server, be careful that some of your images will not be displayed on the web page, and an emergency icon will appear, which means that your file path is incorrectly ordered or encoded, if you have the following file structure, the code should look like to this file structure: → web (main folder) → images (subfolder) → logo.png (image in a subfolder) below is the code below

< img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

if you uploaded your files to the web server, neglecting the file structure, not creating a web folder, if you upload files directly, then your images will be broken, you will not be able to see the images, and then change the code as follows

 <img src="images/logo.jpg" alt="image1" width="50px" height="50px">

thanks-> vamshi krishnan

0
Dec 03 '16 at 5:32
source share


More articles:


All Articles