Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

placeimg doesnt reload a fresh img each time stays on same img am i doing something wrong?

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

3 Answers

Steven Parker
Steven Parker
216,083 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 script only targets the first image on the page.

Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

hi there thanks for your time!! i applied this code(not that i know what it means yet :) ) and it worked to refresh and fetch a random image on the first reload of the browser however when i tried to reload a second time the image stayed the same again. any thoughts much appreciated

sam

Steven Parker
Steven Parker
216,083 Points

This code adds a random number to the URL so that the browser won't think it's the same as any previously cached. It has been quite effective in my experience — are you sure this is the first image on the page?

To facilitate a complete analysis you can make a snapshot of your workspace and post the link to it here.

Where in the header do You place this fake query string?

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

Steven Parker
Steven Parker
216,083 Points

This is JavaScript code, it would not go in the header. A typical location would be inside a pair of <script> tags as the last thing in the <body> element.

Fantastic! Adding this code inside a pair of <script> tags in the <body> element fixed the issue. Thanks so much!

Espen Gunstensen
Espen Gunstensen
1,574 Points

Thank you Steven Parker! I was also very confused but this seemed to fix it. Cant wait to become a decent css-artisto and going even further with javascript.

I have a question still, out of interest:

Even though I understand what the javascript-code does, why do you not have to link it up to a .js-file?

Steven Parker
Steven Parker
216,083 Points

JavaScript can always be included between "<script>" tags, or be brought in from an external file. It performs the same either way. An external file is generally considered a better practice, particularly when you have more than the tiny bit of code here.

Espen Gunstensen
Espen Gunstensen
1,574 Points

I understand. Thank you for being so helpful :)