I have an image in a folder "image" and my html page in another folder "Source-Code". How can I provide the link of the image in my html page as a relative path and not absolute path.
**Note:
The html page is inside another folder so please provide your suggestions accordingly.
Simply copying the relative path of the image is not working.
I dont need the absolute path (as i need to transfer the code so the absolute path will keep on changing)**
You need to use two dots (eg "../") to go up one directory and then you can access your images directory to get the image.
<img src="../images/imgname.png">
I am using VSCode and I am trying to add an .svg file to my project but it is not appearing on the Live Server. I used the same code just different file name as the other assets and it the file just will not appear.
Here is the JSFiddle of my project: https://jsfiddle.net/sillybrownboy/netgLq94/14/
'''
<img class="about_1"
src="images/about_icon.svg">
'''
I obviously had to host my .svg files and .png files in order to get it to work but I left the code for the "about_icon.svg" the same at the bottom of the HTML.
I would check path where the about_icon.svg image is being stored. On your JSFiddle code, all the images are showing an absolute path, where the about_icon.svg is showing a relative path, in relation to that specific web page. If the about_icon.svg image is being stored on a remote server, similar to the other images, then you want to change the src location for the about_1 image to an absolute path, not a relative path.
Also, from my experience, I have forgotten to upload images or uploaded to a wrong location on the server, and have wondered why they weren't displaying.
So I have this HTML code:
<img src="C:\Users\Nico\Documents\Sublime\Proyecto Tics\templates\logo.png" width="30" height="30">
I've tried several things to make it work but it just won't load the image, the file path is correct and when I open the HTML file and get the image path then put it into chrome it opens the image perfectly. I've also tried using "logo.png" as the source but it wouldn't work either when I copied the image path it wasn't correct so ended up specifying the whole path. Whatever I specify as path doesn't seem to load.
Don't use file system absolute path in html.
Refer HTML File Paths
C:\ is not an actual path naming convention. It is just something Google Chrome has, try using a relative path.
<img class="sealImage" alt="Image of Seal" src="file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg">
That doesn't display an image, just the alt.
But if I go to
file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg
in a browser, the image displays.
I'm hosting this on xampp, on a windows machine right now.
I've tried different browsers, and with and without %20 for space, but I know that with is the correct way.(It worked with both, actually)
And I know the images will only be visible on the machine that's hosting it, that's not a problem.
Your file needs to be located inside your www directory. For example, if you're using wamp server on Windows, j3evn.jpg should be located,
C:/wamp/www/img/j3evn.jpg
and you can access it in html via
<img class="sealImage" alt="Image of Seal" src="../img/j3evn.jpg">
Look for the www, public_html, or html folder belonging to your web server. Place all your files and resources inside that folder.
Hope this helps!
My images were not getting displayed even after putting them in the correct folder, problem was they did not have the right permission, I changed the permission to read write execute. I used chmod 777 image.png. All worked then, images were getting displayed. :)
It wont work since you use URL link with "file://".
Instead you should match your directory to your HTML file, for example:
Lets say my file placed in:
C:/myuser/project/file.html
And my wanted image is in:
C:/myuser/project2/image.png
All I have to do is matching the directory this way:
<img src="../project2/image.png" />
My problem was that I had / in front of the path (assets is a dir), such as:
<img src="assets/images/logo.png>" is correct one, while
<img src="/assets/images/logo.png>" returns an error.
You can try just putting the image in the source directory. You'd link it by replacing the file path with src="../imagenamehere.fileextension In your case, j3evn.jpg.
my problem was not including the ../ before the image name
background-image: url("../image.png");
change the name of the image folder to img and then use the HTML code
The simple solution is:
1.keep the image file and HTML file in the same folder.
2.code: <img src="Desert.png">// your image name.
3.keep the folder in D drive.
Keeping the folder on the desktop(which is c drive) you can face the issue of permission.
Not a direct answer to this particular question. But in case, you are giving the image address correctly like this,and wondering why you don't see the image in the output,
<img src ="../../../public/image.jpg"/>
Directly give the image name like ,
<img src="image.jpg"/>
Or if you have a folder inside public , like say icons , give it like
<img src="/icons/logo.jpg"/>
This is because, React already expects you to have all your images inside public folder. So you don't need to explictly give it.
In your angular.json folder structure should be like this
"assets": [
"src/assets",
"src/favicon.ico"
],
not this
"assets": [
"src/favicon.ico",
"src/assets",
],
This solved my problem.
I had created one HTML page for my experiance. In this i had use the background image like c:\documents ans settings.....\leftline.png.
But i don't know how to add images from a common directory. (like background-image= ('./images/leftline.png'). how i can do like this?
The second line you have is a relative address, relative to the "thing" that is calling it.
So, say you have a webpage called "index.html" and it lives in
C:\My Documents\WebPages\My Page. You might also have C:\My Documents\WebPages\My Page\images\leftline.png
Now, rather than type in "C:\My Documents\WebPages\My Page\images\leftline.png" we can simply use "images\leftline.png" in our index.html page. Why? Well, check the locations:
C:\My Documents\WebPages\My Page\images\leftline.png
C:\My Documents\WebPages\My Page\index.html
RELATIVE to index.html, leftline is only one directory away, so you can address relatively.
You have to save the images inside the directory of your website and then you can acess these images using relative path.
If your page for example Default.htm lies inside the virtual directory WebSite1 then you can create a folder for images say 'Images' and can point to an image inside the 'Images' directory by using 'Images/image1.jpg'
If from your html file you have to traverse a folder up then you can use '../Images/image1.jpg'
You can also give an absolute path for the image like http://.....
Put the files in a directory that is in the same folder the html file is in. name the folder images.
You need to have this image inside your website.
And then the trick is to work out what URL to use (that's apparently your problem).
When you use an HTML image tag () in you page, then the browser sees the URL you specify. If that URL is relative (does not start with "http://" or a "/"), then it is sees as relative to the URL of the page. So usually you will need some "../" to go back to the root of the site and then back up again to the image.
A URL that is specified inside a .css file is relative to that css file.
If you use asp.net and want to specify the image-url in a server tag ( for instance), then you can use a "~" as first character to specify the "root of the site". This will work only if that URL is processed by the server as a property of some server control.