HTML Introduction to HTML and CSS HTML: The Structural Foundation of Web Pages and Applications Paragraph Tags

Images are not loading correctly

when i changed the code to cycle images from placeimg.com, the profile image does not change when i reload page. It seems the code is correct but what am i doing wrong?

<img src="http://placeimg.com/400/400/people" alt="Drawing of Jane Smith" class="profile-image">

Zack Lee
Zack Lee
Pro Student 17,644 Points

can you show us all your code? like the css and the html?

<!DOCTYPE html> <html> <head> <title>Caleb Burke's Resume</title> <link rel="stylesheet" href="resume.css"> </head> <body> <img src="http://placeimg.com/200/200/any" alt="Caleb Burke, Web Developer" class="main-image"> <h1>Caleb Burke, Web Developer</h1> <h2 class="section-title">Summary of Qualiifications</h2> <ul> <li>Experience as a freelance web developer</li> <li>EXperience with HTML, CSS, and JavaScript</li> <li>Bachelor of science, Economics</li> </ul> <h2 class="section-title">Education</h2> <h2 class="section-title">Employment</h2> <p><a href="index.html">Go Back</a></p> </body> </html>

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Caleb Burke's Profile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"> </head> <body> <div class="main-nav"> <ul class="nav"> <li class="name">Jane Smith</li> <li><a href="#">Home</a></li> <li><a href="resume.html">Experience</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div>

<header>
  <img src="http://placeimg.com/400/400/people" alt="Drawing of Jane Smith" class="profile-image">
  <h1 class="tag name">Hello, I’m Caleb.</h1>
  <p class="tag location">My home is Louisville, Kentucky.</p>
</header>

<main class="flex">
  <div class="card">
    <h2 class="card-title">Background</h2>
    <ul>
        <li>I’m an aspiring web designer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs.</li> <li>I’m excited to bring my life experience to the process of building fantastic looking websites.</li>
        <li>I’ve been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</li>

       </ul>
    <h3>A New Subsection</h3>
    <ul>
      <li>To learn more, <a href="resume.html">view my resume.</a></li>
    </ul>
  </div> 

  <div class="card">
    <h2 class="card-title">Goals</h2>
    <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
    <ul class="skills">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Ruby</li>
      <li>Rails</li>
    </ul>
    <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
  </div> 

</main>
<footer>
  <ul>
    <li><a href="Http://twitter.com/cburke93" target="blank" class="social twitter">Twitter</a></li>
    <li><a href="#" class="social linkedin">LinkedIn</a></li>
    <li><a href="#" class="social github">Github</a></li>
  </ul>
  <p class="copyright">Copyright 2015, Jane Smith</p>
</footer>

</body>

7 Answers

Steven Parker
Steven Parker
163,023 Points

Your browser may be displaying a cached image instead of fetching a new one.

You can add a fake query string to your image URL to prevent the browser from using the cached version with a line of JavaScript:

document.querySelector("img").src += "?nocache=" + Math.random();

Note that this particular version only affects the first image on the page.

Akki Paunila
Akki Paunila
1,674 Points

Add how please? Same happened to me, but unfortunately not like Caleb, I do not understand what you mean.

Could you show where you add that string?

Steven Parker
Steven Parker
163,023 Points

If your code does not already have any JavaScript, you could place that line between "<script></script>" tags just before the closing "</body>" tag.

Note that as shown, it will only work on the first image of the page.

Thank you for your help, TeamTreehouse is remarkable!

James March
James March
7,921 Points

Thanks Steven, that's really useful, I was having the same problem

benjamin sidney
benjamin sidney
420 Points

Thanks, that fixed the problem.

Thanks! That helped me too :)

Thank you soo much. I was also having same problem.

Vlad S.
Vlad S.
1,252 Points

I usually use Ctrl+F5 to reload the page and clear browser cache.