why are my a and img tag not working? none of my images and image links are working-CodePudding

None of my images are loading onto the website, the only thing that comes up is the alt text

these are either supposed to be an image or an image as a link more information: Failed to load resource: the server responded with a status of 404 (Not Found) <- this is what it says on my website on inspect element and yes, all my files are in order all my images are in an img folder properly labeled These images are the code, also when I put old code into the same folder it also stopped working, does that mean there is something wrong with the folder?
``` J321 Potfolio

      <link rel="stylesheet" type="text/css" href="style.css">
     <style>
            body{
        background-color: #FCFCF5;
        }

     h1 {
     padding-bottom: 20px;
     padding-top: 30px;
        }

    #move {margin: 0 auto; padding-left: 230px; width: auto; height: 300px;}

        p { width: 350px; padding-left: 150px;}
         h2 { padding-left: 150px;}
     #wide {margin: 0 auto; padding-left: 230px; width: auto; height: 300px;}
      </style>
      </head>
       <body>
      <div id="nav-wrapper">
     <div id="nav">
             <ul>
               <li><a href="home.html" >Home</a></li>
             <li><a href="about.html" >About</a></li>
           <li><a href="gallery.html" >Gallery</a></li>
             <li><a href="bylines.html" >Bylines</a></li>
          <li><a href="portfolio.html" >J321 Portfolio</a></li>
       </ul>

    </div>
   <div ></div>
    </div>  
   <h1>J321 Portfolio</h1>
      <h2>Course Reflection</h2>
   <h2>Midterm</h2>
   <h2>Final</h2>
    <h2>Instagram Story</h2>
   <div id="wide">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/HihXQD33yL0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>. </iframe>
 </div>
  <h2>Infographic</h2>
   <div id="move">
   <img src="img/nebiyu-infographic.png" alt="infographic on UCLA student worker strike">
   </div>
   <div >
     <p>Salome Nebiyu &copy; 2022</p>
    </div>
  </body>
 </html>

<!DOCTYPE html>
<html>
<head>
<title> Bylines </title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
        body{
        background-color: #FCFCF5;
        margin-bottom: 30px;
    }

    h3 { padding-left: 160px; padding-top: 20px;}

    iframe {
            width: 560px;
            height: 315px;
            border:none;
            padding-left: 160px;
        }

        h4 { padding-left: 60px; padding-top: 20px;}

        img { width: 30%; overflow:hidden; }

#gallery {display: block; margin: 0 auto; padding-left: 60px; margin-top: 30px; padding-bottom: 60px;}

</style>
</head>
<body>
<div id="nav-wrapper">
<div id="nav">
        <ul>
            <li><a href="home.html" >Home</a></li>
            <li><a href="about.html" >About</a></li>
            <li><a href="gallery.html" >Gallery</a></li>
            <li><a href="bylines.html" >Bylines</a></li>
            <li><a href="portfolio.html" >J321 Portfolio</a></li>
        </ul>

</div>
<div ></div>
</div>  
<h1>Bylines</h1>
    <h3>Annenberg Media </h3>

    <h4>ARN Segment: California Proposition 31 (1:01:53)</h4>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/n5dO6ieixOs" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<a href="help.html" >Bylines</a>
<div id="gallery">
    <h4>Digital</h4>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/12/02/woman-life-freedom-iranians-at-usc-host-march-supporting-anti-government-movements-in-iran/"><img src="img/img1.png" alt="photo of iran protest"></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/11/02/usc-and-los-angeles-celebrate-native-american-heritage-month/"><img src="img/img2.png" alt="photo of people"></a>
<a href="https://www.uscannenbergmedia.com/2022/11/30/uscs-movement-for-an-on-campus-skate-park-gains-traction-with-official-petition/"><img src="img/img3.png" alt="photo of signs" target="_blank" ></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/11/16/ucla-teacher-assistants-and-researchers-continue-striking-for-better-wages/"><img src="img/img4.png" alt="photo of strikers"></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/11/09/in-the-west-the-votes-have-been-cast-but-the-results-might-take-a-little-while/"><img src="img/img5.png" alt="photo of person"></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/10/26/on-the-hunt-for-rick-carusos-mega-yacht/"><img src="/Users/bruh/Desktop/itp104-submissions-snebiyu/final/img/img6.png" alt="photo of phone"></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/10/26/usc-urban-planning-podcast-hopes-to-effect-change/"><img src="img/img7.png" alt="photo of crosswalk"></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/10/05/usc-football-is-back-and-so-are-ticket-scams/"><img src="img/img8.png" alt="photo of phone"></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/09/29/usc-offers-flu-shots-to-get-ahead-of-flu-season/"><img src="img/img9.png" alt="photo of person"></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/09/21/annenberg-at-50-students-and-faculty-reflect/"><img src="img/img10.png" alt="photo of person"></a>
<a target="_blank" href="https://www.uscannenbergmedia.com/2022/09/09/extreme-heat-wave-puts-usc-at-risk-of-power-outage/"><img src="img/img11.png" alt="photo of person"></a>

</div>
<div >
         <p> &copy; 2022</p>
    </div>
</body>
</html>

CodePudding user response：

As Mr. Typo has said, remove the alt attribute. Also, there's no src attribute in anchor tags, so if you really want an image link, try doing this.

<a href="http://example.com" target="_blank">
    <img src="https://cdn.mos.cms.futurecdn.net/8gzcr6RpGStvZFA2qRt4v6.jpg" alt="Example text"/>
</a> 

<!-- Youtube logo is the image used in the example. -->

It could also be something with the image trying to load from a relative path, which doesn't exist. Try using an absolute path/link and see if that'll work.

CodePudding user response：

brother In your code syntex error so browser not shows the front-end error . you must properly close All tags.

<a>
  <img src="img.jpg" alt="Text If image not Loaded THis text Will be loaded" width="500" height="600">
</a>

this code may be help you