I have a hierarchy like:
index.html
/share/index.html
/img/myImage.png
share/index.html is on a sub-domain (http://www.share.foo.com instead of http://www.foo.com).
I would like to access myImage.png from both domains.
So far, I've only been able to find one way to manage this. From index.html I reference the image as:
img/myImage.png
and from /share/index.html I reference the image as:
http://www.foo.com/img/myImage.png
This doesn't feel correct because I shouldn't have to be that explicit with my URL. It should probably be somewhat relative to my own path structure.
I'm wondering what the correct fix here is? Should share/index.html be on the same level as index.html? How would naming conventions work for something like that if they're both supposed to be index.html on the same level? Other suggestions?
To access the image from "index.html" you can use the relative path like you are currently using:
img/myImage.png
However, when you are in the /share/ folder you need to go back a folder:
../img/myImage.png
This is of course assuming your /share/ directory is locate within the root html folder (public_html or whatever yours may be called)
You can use
../img/myImage.png
for getting image in subdomain.
You can use multiple ../ to go back any level in the hierarchy
For eg: ../../ will take two levels back from the current level.
There are two ways to accomplish this
Filesystem way
If the server is on an Unix (Linux) based system, create a symbolic link in /share that points to /img.
From a shell:
~$ cd /docroot/share
~$ ln -s ../img img
This will make all contents of /img appear under /share/img as well.
If you do not have direct shell access to your web-host, you can try creating the symbolic link in your local copy of your /share directory and sync it to the server. To create a symbolic link you do not have to have a copy of the location where it points to on your local computer.
If you are on windows, NTFS supports symbolic links as well, but I can not tell you how that would sync to the web server.
Using relative paths lower than your doc_root (../img/myImage.png) to point to your image from your HTML document, is invalid in this case. It would resolve to: http://www.share.foo.org/../img/myImage.png
<base> tag way
The <base> tag sets the base address where to look for linked content. Downside is: It will form the base for al relative linked content. (Style sheets, images and links). So page linked as <a href=about.hmtl> will point to <base>/about.html.
<head>
<base href="http://www.foo.com/" target="_blank">
</head>
<body>
<img src="img/myImage.png">
</body>
Related
I do a lot of off line programming.
Sometimes for example this path /a/b/c/d.html
to go backwards to an anchor at a/a.html
I frequently see ../ or ../../ what do they mean, how are they used?
how do I use them and not have to put the entire path of the website in,
if the main site is html.com
how do I use the folders without using html
example I want the anchor at a/a.html without using html.com/a/a.html
would this work the same to not have to use it? ../a/a.html
did not work in offline mode
explain please
so that I don't have to re write the links from offline to public html
and the sites name
../image.jpg means 'go up one directory and use image.jpg'
./image.jpg means use the image in this directory
/image.jpg means 'use the image from the root directory of the website'
So this example:
<img src"../../images/image.jpg" alt="an image">
Uses the image from 2 directory levels up and then go in the images directory and then use image.jpg.
That should get you started.
From the very start of my development career one thing that has kept confusing me is relative and absolute paths.
Now I understand it in the way of URLs and that if you are going to a webpage on the same server you use the relative path and if the page is on a different (external) server then you will need to use the absolute path i.e. http://www.google.com. But I never understood it in the way of files.
Example and my problem.
I am building a HTML email class that will send a image as a img as a banner
builder.AppendLine("<img src=C:\Images\\MailBanner.jpg\" alt=\"banner\">");
Now if I use the absolute path like above, the image will display.
However, when I deploy the site onto our web server, then of course, the image is not in the C: Drive so the image doesn't appear in the email. So where do I need to put the \..\ in the source?
Is it as the point where the image is stored on the web server in the project?
I guessing you may need some more information then I have posted but I may need some explanation really.
Thanks
Just put images in a folder images under your project folder then your code will be:
builder.AppendLine("<img src=\"\images\MailBanner.jpg\" alt=\"banner\">");
And your image path is:
/project/images/MailBanner.jpg
And your project is normally under the www folder of your web server folder.
Set up an images folder in your project and fix your src attribute:
builder.AppendLine('<img src="images/mailbanner.jpg" alt="banner">');
EDIT: your problem here is your javascript code. You need to use an Apostrophe before and after your tag and quotation marks for your attributes of the img tag. Otherwise your javascript cant understand which your attributes are.
I prefer to mostly use relative paths, because when you move the data from a local location to a web server, as long as the directory structure doesn't change nothing will break. But, the OS also matters.
For instance, I can see that your file was moved from a windows server. So unless you moved it to another windows server and the drive letter is the same, your absolute path is broken.
If the file was moved to a windows server with the exact same directory structure:
builder.AppendLine('<img src="C:\Images\MailBanner.jpg" alt="banner">');
If the file was moved to a linux server:
www/images
builder.AppendLine('<img src="/Images/MailBanner.jpg" alt="banner">');
NOTE: The first forward slash is very important. The / tells Apache that the directory is located in the document root (www). Without the /, Apache expects the directory to be in the current directory where the file/script is located. Another important consideration when moving files from Windows to Linux is that Linux is case sensitive. /Images/MailBanner.jpg is not the same as images/mailbanner.jpg.
I'm kind of new to HTML. I'm trying to display an image on my website but for some reason, it just shows a blue box with a question mark in it. I've looked everywhere on the internet, but none of the solutions seemed to work for me. I've tried:
<img src="iwojimaflag.jpg"/>
<img src="images/iwojimaflag.jpg"/>
<img src="Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/images/iwojimaflag.jpg"/>
Just to expand niko's answer:
You can reference any image via its URL. No matter where it is, as long as it's accesible you can use it as the src. Example:
Relative location:
<img src="images/image.png">
The image is sought relative to the document's location. If your document is at http://example.com/site/document.html, then your images folder should be on the same directory where your document.html file is.
Absolute location:
<img src="/site/images/image.png">
<img src="http://example.com/site/images/image.png">
or
<img src="http://another-example.com/images/image.png">
In this case, your image will be sought from the document site's root, so, if your document.html is at http://example.com/site/document.html, the root would be at http://example.com/ (or it's respective directory on the server's filesystem, commonly www/). The first two examples are the same, since both point to the same host, Think of the first / as an alias for your server's root. In the second case, the image is located in another host, so you'd have to specify the complete URL of the image.
Regarding /, . and ..:
The / symbol will always return the root of a filesystem or site.
The single point ./ points to the same directory where you are.
And the double point ../ will point to the upper directory, or the one that contains the actual working directory.
So you can build relative routes using them.
Examples given the route http://example.com/dir/one/two/three/ and your calling document being inside three/:
"./pictures/image.png"
or just
"pictures/image.png"
Will try to find a directory named pictures inside http://example.com/dir/one/two/three/.
"../pictures/image.png"
Will try to find a directory named pictures inside http://example.com/dir/one/two/.
"/pictures/image.png"
Will try to find a directory named pictures directly at / or example.com (which are the same), on the same level as directory.
Lets look at ways to reference the image.
Back a directory
../
Folder in a directory:
foldername/
File in a directory
imagename.jpg
Now, lets combine them with the addresses you specified.
/Resources/views/Default/index.html
/Resources/public/images/iwojimaflag.jpg
The first common directory referenced from the html file is three back:
../../../
It is in within two folders in that:
../../../public/images/
And you've reached the image:
../../../public/images/iwojimaflag.jpg
Note: This is assuming you are accessing a page at domain.com/Resources/views/Default/index.html as you specified in your comment.
img {
width: 200px;
}
<img src="https://image.ibb.co/gmmneK/children_593313_340.jpg"/>
<img src="https://image.ibb.co/e0RLzK/entrepreneur_1340649_340.jpg"/>
<img src="https://image.ibb.co/cks4Rz/typing_849806_340.jpg"/>
please see the above code.
If you put <img src="iwojimaflag.jpg"/> in html code then place iwojimaflag.jpg and html file in same folder.
If you put <img src="images/iwojimaflag.jpg"/> then you must create "images" folder and put image iwojimaflag.jpg in that folder.
I confess to not having read the whole thread. However when I faced a similar issue I found that checking carefully the case of the file name and correcting that in the HTML reference fixed a similar issue.
So local preview on Windows worked but when I published to my server (hosted Linux) I had to make sure "mugshot.jpg" was changed to "mugshot.JPG". Part of the problem is the defaults in Windows hiding full file names behind file type indications.
Here are the most common reasons
Incorrect file paths
File names are misspelled
Wrong file extension
Files are missing
The read permission has not been set for the image(s)
Note:
On *nix systems, consider using the following command to add read permission for an image:
chmod o+r imagedirectoryAddress/imageName.extension
or this command to add read permission for all images:
chmod o+r imagedirectoryAddress/*.extension
If you need more information, refer to this post.
I found that skipping the quotation marks "" around the file and location name displayed the image...
I am doing this on MacBook....
I am storing style sheets in {root}/styles while images in {root}/images for a website.
How do I give the path in the style sheets to go look in the images directory for the specified images?
e.g. In background-image: url('/images/bg.png');
Use .. to indicate the parent directory:
background-image: url('../images/bg.png');
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 backward and starts there
Starting with ../../ moves two directories backward and starts there (and so on...)
To move forward, just start with the first sub directory and keep moving forward.
Click here for more details!
Use ../:
background-image: url('../images/bg.png');
You can use that as often as you want, e.g. ../../images/ or even at different positions, e.g. ../images/../images/../images/ (same as ../images/ of course)
In Chrome when you load a website from some HTTP server both absolute paths (e.g. /images/sth.png) and relative paths to some upper level directory (e.g. ../images/sth.png) work.
But!
When you load (in Chrome!) a HTML document from local filesystem you cannot access directories above current directory. I.e. you cannot access ../something/something.sth and changing relative path to absolute or anything else won't help.
If you store stylesheets/images in a folder so that multiple websites can use them, or you want to re-use the same files on another site on the same server, I have found that my browser/Apache does not allow me to go to any parent folder above the website root URL. This seems obvious for security reasons - one should not be able to browse around on the server any place other than the specified web folders.
Eg. does not work: www.mywebsite.com/../images
As a workaround, I use Symlinks:
Go to the directory of www.mywebsite.com
Run the command ln -s ../images images
Now www.mywebsite.com/images will point to www.mywebsite.com/../images
Supposing you have the following file structure:
-css
--index.css
-images
--image1.png
--image2.png
--image3.png
In CSS you can access image1, for example, using the line ../images/image1.png.
NOTE: If you are using Chrome, it may doesn't work and you will get an error that the file could not be found. I had the same problem, so I just deleted the entire cache history from chrome and it worked.
if you want to go to the root of the folder use / or ctrl+space
if you want to go to the back folder use ../ and ctrl+space if it dont suggest
and not use the live server if you use the ../
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.