I have my images in '/src/main/webapp/images' folder and my html code is in '/src/main/webapp/app/report' folder. How to specify the path to the image mentioned in that other directory?
I have tried:
<img src=".//src/main/webapp/images/pdf-file_128.png">
and also:
<img src="/src/main/webapp/images/pdf-file_128.png">
Note I am currently in webapp/app/report directory...
Thanks in advance!
Generally, you should be able to specify a Relative Path, using /../ to traverse up each directory level:
"../../images/image01.png"
Below are the relative path rules that you should know :
"/" returns to the root directory and starts path there
"../" moves one directory back and starts path there
"../../" moves two directories backward and starts path there (and so on...)
You need to go two level up to include the image in images folder as below :
<img src="../../images/pdf-file_128.png">
From your current directory, this should be the path to your image
../../images/your image name.png
Related
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 help with one situation. I creat file structure :
MainFolder
index.html
IMGfolder
bg.jpg
CSSfolder
style.css
I need link picture bg.jpg relative url in my CSS style file :
background-color: url('?');
I try
/img/bg.jpg
../img/bg.jpg
but, it's not working. Thanks for help :)
Just add some lines of php in your html using getcwd() to be sure your relative path is correct.
BTW: In UNIX systems:
/ refers to the root directory
./ refers to the current directory
../ refers to the directory, in which the current directory is
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">
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 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.