My Folder directories are as described below
Root Directory: G:/bootstrap/index.html
Image directory: G:/sample.jpg
I wanted to link my image like this. But image path is not working properly. I have added Bootstrap CDN in head section.
But browser is not showing image properly. What may be the reason.
Browsers aren't allowed to access local file in the format you are trying. Rather access the file like this: file://G:/sample.jpg
Related
i am practicing html using my computer and i run the html file using the "Live Server" add-on in vscode. the image doesnt show up with the relative path:
<img src="../html/images/coffee background.jpeg" alt="tx"/>
my root folder is the css folder, which i have opened in vs code. index.html is stored in this css folder.
the image is stored in the images folder inside the html folder, which is stored in the folder above the css.
using inspect element on the img link in the browser this shows up: Cannot GET /html/images/coffee%20background.jpeg
i'm pretty sure this relative path is correct because when i click "follow link" in vs code when i hover over the link, the image shows up in vs code. why isn't the image displaying when i run the html file?
In a Web server, you cannot get lower than the Web root, while in VSCode, you can (you can drill down to the disk root, I imagine).
So when you say,
my root folder is the css folder, which i have opened in vs code.
index.html is stored in this css folder.
this means that you cannot enter a "sibling" folder of css. Just as, when running and your root is /var/www/customer1_pages, you obviously cannot access "../customer2_pages/passwords.txt".
../html/images (but also ../../../html/images etc.) is the same thing as /html/images, and (for the web server) means <ROOT>/html/images, which in your filesystem would be css/html/images.
You need to set the root folder to html, and place the index there. Or move images inside css.
I am using the following code to display the image on my website:
<img src="/logo.jpg" alt="Image1">
The image is on my hard drive. However, the image is not displayed.
I have searched all over the internet and check the folder and path to be correct. The image is in the same folder as my HTML file.
I tried to upload the image in google drive and google photos and provide the HTML link however still I could not be able to display the image in both Chrome and IE.
Can anyone explain what can be the solution?
Is your image stored in the OS root directory?
If it's in the same folder as the html file then you want to remove the / at the beginning (or change it to ./)
/[filename] means file at the root of the OS/server (analogous to C:/ in Windows)
./[filename] means file in the current working directory (as does just [filename])
../[filename] means file in the parent directory
I am having a hard time rendering/ successfully hosting images on Github.
My github repository has the following link tree structure: michaelamay/projects/post.html
and there is an image folder with the structure: michaelamay/projects/images/
In my code i add that to the src in 3 different ways, none of which are working (see image below in line 24,25,28, and 31)
This is how the rendering looks. Just a picture icon shows.
Here is the main page of the repository.
Inside the images folder.
Does anyone have any idea why that is happening? I insert an image from a website and it renders fine but not when called locally from the folders its located.
Given that the file path of the post.html file is michaelamay/projects/_layouts/post.html. If you are trying to access michaelamay/projects/images/img_forest.jpg, the path should be given as:
<img src="../images/img_forest.jpg">
This is because the 'images' folder is not under either 'projects/_layouts' or the root of the project structure.
For more information, you can check this link.
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
After i hosted my HTML5 application on Apache tomcat.My page is not showing any background image.
I have placed my project folder (MyExpert) inside root folder and inside MyExpert folder there is an image folder and a css folder .I am giving background image as
background-image:url(../images/myprofile_on.png)
in my css file but images are not coming on my pages except home page.Though application is working fine on localhost.I tried various thing but no fruitful result.
it looks like it will be a simple referencing or permissions issue here, try nivgating directly to the image in your browser and see if you can navigate to it manually so is this case given your description it would be:
http://www.yourdomain.com/MyExpert/images/myprofile_on.png
If that works then its a simple referencing issue from you css file, if it returns a forbidden access page you know its permissions, if it returns a file not found I would recommend checking the casing on your CSS url to ensure it matches the file path as if your box is linux then file paths are most likely case sensitive.