So I'm making a website for the first time. I've tried to put some images on it to test via Cyberduck. However, it's not working.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Test site</title>
</head>
<body>
<h1>Test</h1>
<p>Test</p>
<img src=“../img/test.png” />
<img src=“../img/tenor.gif”></img>
</body>
</html>
My images are stored in the img folder:
printscreen directory
I've already checked for case-insensiveness.
I've put the images in the img folder and I can access the images via the path. However, I don't see them (in Chrome) or I see that they are broken(in Safari).
Anyone know how to solve this?
This would have been a comment.
Try running a server in the projects directory.
But possible issues might include:
Incorrect file extention.
Incorrect path. Instead of ".../" use "/".
The answer to my question came from keja. Thanks a lot!
I apparently used the wrong quotes. Images are working now, so problem solved!
Related
Can someone help me because when i create the html page, the browser does not load the images.Should I uninstall the chrome browser?
please check your image path URL link. And please share more info about the issue. Code and other docs.
First, we need a folder/file structure.
Please create a Folder named images, you don't need to create a folder for images, but please do it!
Home Folder
images
image.png
index.html
Now, here the basic HTML code:
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<img src="images/image.png" alt="myImage">
</body>
</html>
Please be sure you use the correct file extension, like .png, or .jpg!
Now you can see the image in your browser!
But please send more information, when it doesn't work!
Have a great day.
I am learning how to use a text editor, and I've just created my first file with it. It previews with the correct output, but when I run it in the browser, it gives me a blank page.
As you can see, the doctype and html tags are in place, as well as the head and body. I am using Visual Studio Code as my text editor. Why will this not display anything in my browser? To be clear, it does preview, just won't display in browser
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Are you sure? It does display on mine. Is the file saved as a .html file? Also, try opening it on another browser. If that doesn't work, try creating a new file in Notepad or something similar, save it with a .html file extension and try opening it again.
EDIT:
Try using Notepad. Check if the file is saved with a UTF-8 encoding. If that doesn't work, try installing another browser or using Edge/Safari/Internet Explorer or whatever built-in browser you have.
In case someone is still struggling with this, try saving your files before you open them. That fixed the problem for me.
Possible Reasons:
You might not have saved the changes after writing the code (most likely).
Problem with the browser (load it in another browser)
Check the extension (just for clarification)
There is no problem with !DOCTYPE html tag or html tag.
It loaded on Fire Fox, just not on Google Chrome for some reason. I'm sorry for wasting everyone's time. As I have said, I am unfamiliar with VS Code. Thank you for all of your suggestions.
I had this same baffling problem. I quit Chrome, re-opened, and then I was able to open my .html files (from my Mac's Finder) with Chrome just like I could already open them with Safari or other browsers.
I just had this problem and the solution was very simple, so I´ll give it just in case someone runs into the same silly mistake. I was typing all the code in the wrong file.
Add this line of code inside your head element:
<meta charset="UTF-8"/>
I would recommend to put the right path under the src with the correct file location
<script src="scripts/main.js"></script>
I was facing the same issue and none of the steps mentioned helped.
So I deleted the index.html file I had, opened my project folder in VS Code, created a new index.html file there, pasted my code and clicked on go live.
Then I could see my image on the webpage. And after that I could see the image even by double clicking the index.html file from Finder. Hope this helps.
Save your file in Notepad or whatever text generator you are using and then close it before launching the html file in the browser. Mine would not open if Notepad was still open.
In visual studio code just type in a blank page
html:5
then just press the touch "tab", it will display a basic html 5 structure to start
If anyone still needs help- It worked after saving the file on VS Code!
Just remove "<html>" a the second line it's already set in the first line
<!DOCTYPE html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I am trying to display an image using plain HTML and the code is given below. There are several posts in SO similar to this but the issue is not resolved
<html>
<body>
<IMG SRC=”Test.jpg” ALIGN=”left” alt="File not exist" />
</body>
</html>
The above code produced the error 'net::ERR_FILE_NOT_FOUND' and I use Windows 10
Both the files are placed under the same folder F:\
I am able to browse the jpg file from browser by typing F:/Test.jpg
I tried from Edge and Chrome browsers and both produced the same error
I cleared the cache / used incognito window but nothing worked
Any suggestion is highly appreciated
EDIT
Both the files are in the same folder. One thing what I noticed is few junk characters were prepended and appended to the image file name. I am not sure whether this is the reason
<html>
<body>
<img src="Test.jpg" align="left" alt="File not exist" />
</body>
</html> <!---now this image will run properly..-->
I have used the Sublime text editor to make a simple CSS file with an objective to make the heading red. Now the below code works perfectly fine
h1 {
color:red;
}
<html>
<head>
<link rel="stylesheet" href="st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
But if I replace the CSS file name from "st.css" to its original file path, it no longer works.
<head>
<link rel="stylesheet" href="C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
Is there any specific reason for this?
I tried refreshing, saving and even live reload but it simply doesn't work. Please explain
Everything looks fine to me. I would just double check that you have the full path correct with no typos or missing directories. I tried the same locally with the equivalent fully qualified path on my Windows machine and it worked fine.
Try to edit the backslashes of the path to normal slashes.
Another way to solve this problem is to have a look at this website because there is a nice example on it.
https://css-tricks.com/quick-reminder-about-file-paths/
If you have any more questions feel free to ask.
I hope that I could help you!
If you're using a server/localhost, You are not allowed to load local resources, that are NOT inside your main website folder, for example: if you have a folder named mywebsite which contains mywebsite/index.html, then once you click twice on index.html, You are allowed to access all files inside you computer, BUT if you run mywebsite in localhost you'are only allowed to access files inside mywebsite folder.
If not You probably made a typo in your absolute path, because your code is working fine in my device.
Seems like I figured it out myself.
I was sure that there couldn't be a typo since I right-clicked (holding shift) on my CSS file and copied its path. I think the problem was on how my browser sees the text.
For example, the below code which has a code path I copied as I mentioned works perfectly fine on Internet Explorer
<html>
<head>
<link rel="stylesheet" href="C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
I saw the pathname on Internet Explorer's URL as
C:\Users\windows\Desktop\Python\Practise\Minutes.html
Now the same code didn't work for Mozilla Firefox which is my primary browser as I noticed the difference between the URL of Firefox and Explorer was of some random slashes at the start, like this
file:///C:/Users/windows/Desktop/Python/Practise/Minutes.html
Therefore I put the file:/// text on my original code as
<html>
<head>
<link rel="stylesheet" href="file:///C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
I even interchanged the backward and forward slashes and it still worked !
So I can conclude that my problem was a browser-specific error and I am really grateful to the community for their quick responses.
This is working in my browser:
<!DOCTYPE html>
<html>
<body>
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
</body>
</html>
But this is not working:
<!DOCTYPE html>
<html>
<body>
<img src="C:\Users\user\Desktop\WE\Pics\milk.png"
onmouseover="this.src='C:\Users\user\Desktop\WE\Pics\butter.png';"
onmouseout="this.src='C:\Users\user\Desktop\WE\Pics\milk.png';">
</img>
</body>
</html>
Please answer as soon as possible and path to my images is totally correct!!
If you want to use paths pointing to your local hard drive, you will need to use the file protocol like this:
file:///c:/Users/user/Desktop/WE/Pics/milk.png
However, it's best practice to use relative URLs instead, for instance:
Pics/milk.png
will find the file milk.png in the Pics folder, where the Pics folder is alongside your HTML file.
You cannot use paths pointing to a local hard drive. That would be a major security issue. you will have to either mount a localhost server or try using the file:// protocol.