My jpg and png image is not showing on my browser?
Question
So I have a logo that I want to show in my browser in HTML, I have tried it as a jpg and a png, neither work. Her is my code:
<html>
<body>
<head>
<title>astro blog pro</title>
</head>
<img src="Astro Blog Pro Logo.png" />
</body>
</html>
2 answers
solution1
1 2020-06-17 22:57:04
First: You have a <head> tag inside your <body> tag which is invaild (in all HTML standards). You should read about basics of html document structure.
You can check your syntax eg here https://www.freeformatter.com/html-validator.html (there are lot's of syntax checker, also for commandline if you use (Linux)).
This should work:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>astro blog pro</title>
</head>
<body>
<img src="Astro_Blog_Pro_Logo.png" alt="put image description here"/>
</body>
</html>
and btw: do not use spaces as <img> is a ressource which will be resolved by the browser and spaces map to %20 , so that "Astro Blog" becomes "Astro%20Blog"
solution2
-2 ACCPTED 2020-06-17 22:15:41
You must add the alt attribute to the img tag. In order for the picture to work properly, it must have an alternative image or name to display if it can't find the src image.
Like so:
<img src="img.png" alt="This is my image" />
When using the alt attribute, you can name it whatever you want. As alt stands for alternative.
Another reason it might not work: The image might not be in the same folder as your HTML document. You should move all of your documents into the same folder.
If you are using an online IDE, then there is no solution as you can only use online images with a URL.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.