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
Sam Weeks
Front End Web Development Techdegree Student 16,699 Pointsplaceimg 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
229,670 PointsYour 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.
A. Able Leksrisawat
7,263 PointsFantastic! Adding this code inside a pair of <script> tags in the <body> element fixed the issue. Thanks so much!
Espen Gunstensen
1,574 PointsThank 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
229,670 PointsJavaScript 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
1,574 PointsI understand. Thank you for being so helpful :)
Sam Weeks
Front End Web Development Techdegree Student 16,699 PointsSam Weeks
Front End Web Development Techdegree Student 16,699 Pointshi 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
229,670 PointsSteven Parker
229,670 PointsThis 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.
A. Able Leksrisawat
7,263 PointsA. Able Leksrisawat
7,263 PointsWhere 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
229,670 PointsSteven Parker
229,670 PointsThis 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.