HTML image tag problems-CodePudding

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to make a basic website</title>
</head>
<body>
  <header>
    <hgroup>
    <h1>Trying to replicate newspage format.</h1>
    <h2>Shouldn't be hard if persistent in effort.</h2>
    </hgroup>

    <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    <ul>
    </nav>

</header>

<section>

<article>
<h1>You can put news in here.</h1>
<h2>Introduction</h2>
<p>News is usually propoganda to get the commonfolk distracted with false information unless they dive deeply.</p>
</article>

<article>
<h1>This is a separate article.</h1>
<h2>Introduction</h2>
<p>Cybersecurity is a field that all legitamate companies should invest in. Unfortunately, many modern technologies tend
to focus more on the appealing side of the audience than the security of their information. Hence, multibillion-dollar
companies have been hacked by mere young people who have just started to learn programming within the past decade.</p>
<p>I am not surprised by the carelessness of these multibillion dollar companies. They have secretly been selling our (the average customer's) data
to scammers and marketing agencies for a quick buck. Some have even been caught sending information of citizens to foreign (to a country) governments.
This should be a crime and illegal, because it is breaching basic human rights. However, they are able to get away with it, since the thirst of this generation for technology never seems to quench.
Just by clicking "Accept" for the Terms and Conditions as well as the Privacy Policies, these companies are able to do illegal business and make billions of it.
It is not fair to the citizens, especially to the minors using their parents' devices without a clue of what they are getting into. Such practices should be deemed illegal
by federal law of all countries. There are many ways that companies can make quick money, and they do not have to compromise the safety of innocent people for that.
One such way is surveys. Investing in surveys on a company's own website is a way to get market research done. However, what researchers fail to realize is that the average consumer would
not care to chip in without an incentive.</p>

<img src="Finance.png" alt="Money" />
</article>
</section>
<footer>
Copyright &copy 2021-2022 By me

    <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    <ul>
    </nav>

</footer>
</body>
</html>

So basically, I've learned html before with no issues a few years ago and decided to go on to different programming languages such as C. I had been working hard on programming with minimal results within the past year, until I decided to take on web development again as a better start.

My problem is, sometimes my code does not work, and according to countless searches and videos, as well as many hours spent debugging, sometimes my code is correct but does not work.

I had learned html in depth years ago during self study. However, the file had gotten corrupted due to a virus, and all my hard work had gone to drain. So I had decided that I would try again when I am more advanced and have something noteworthy to publish a site for. I feel that although I am not much better than back then, I should focus on web development right now (if not C).

Here is an example of what I am facing (right now):

What blows my mind is that even W3C Validator has accepted my code, however, the browsers (Internet Explorer, Edge, Chrome) refuse to display my images (using notepad text editor on Windows 10). Even more ironic is the fact that I was successfully able to display multiple images on my (unofficial) site years ago.

Is there something I have forgotten? I mean, I've been watching videos of how to solve it for over two hours now.

CodePudding user response：

If your image file Finance.png is in one of the sub-folder to the folder where your html file is present, then you need to provide the folder path in the src attribute for the img tag. If your image file is in images folder, then make the img tag like so : <img src="images/Finance.png" alt="Money"/>

CodePudding user response：

One of the common issue may be the incorrect path of image in the src of <img>.

Like you can save image in the same directory and access using

<img src="finance.jpeg" alt="finance"/>

Also you can save the image in a folder named images in the same directory and then access like this

<img src="images/finance.jpeg" alt="finance"/>

Secondly, check whether the type of the file is correct or not , if its jpeg or in some other format.
Thirdly, check that <img> tag is properly closed,

CodePudding user response：

You have to give the full path for the image like,

<img src=/images/Finance.png/>

If you have your image in images folder.