Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Caleb Burke
Caleb Burke
2,402 Points

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
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

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

Caleb Burke
Caleb Burke
2,402 Points

<!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
231,269 Points
Steven Parker
Steven Parker
231,269 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,675 Points
Akki Paunila
Akki Paunila
1,675 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
231,269 Points
Steven Parker
Steven Parker
231,269 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.

Caleb Burke
Caleb Burke
2,402 Points
Caleb Burke
Caleb Burke
2,402 Points

Thank you for your help, TeamTreehouse is remarkable!

James March
James March
7,921 Points
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
benjamin sidney
benjamin sidney
420 Points

Thanks, that fixed the problem.

Grendys Robles
seal-mask
.a{fill-rule:evenodd;}techdegree
Grendys Robles
Front End Web Development Techdegree Student 7,150 Points
Grendys Robles
.a{fill-rule:evenodd;}techdegree
Grendys Robles
Front End Web Development Techdegree Student 7,150 Points

Thanks! That helped me too :)

Than Win Hline
Than Win Hline
964 Points
Than Win Hline
Than Win Hline
964 Points

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

Vlad S.
Vlad S.
1,252 Points
Vlad S.
Vlad S.
1,252 Points

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