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 Image Tags

Posted by web pad
web pad
4,483 Points

My place image does not change each time I refresh it. Did I code it wrong? This is my code..

I followed teachers guide to use place image. However, when I tried to refresh it, it only changed image one time, and each time I refresh the browser it is still the same image. Here is how my code looked like.

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

4 Answers

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

Most likely, your browser is caching the image. There's probably a way to tell your browser to discard the cache as you refresh, or to manually clear cached browsing data.

Lia Sansoucy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Lia Sansoucy
UX Design Techdegree Graduate 16,070 Points
Lia Sansoucy
.a{fill-rule:evenodd;}techdegree seal-36
Lia Sansoucy
UX Design Techdegree Graduate 16,070 Points

If you use https instead of http then it will not refresh the image. The URL on placeimg.com will have the s in there. If you look at Treasure's URL it is not there.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

The cacheing is probably not related to the transfer protocol itself, but changing from one protocol to the other would cause an uncached refresh.

Kelli Ivey
Kelli Ivey
4,558 Points

This worked perfectly as I was having the same issue as OP. Danke!

web pad
web pad
4,483 Points
web pad
web pad
4,483 Points

Thank you ;-)

Lia Sansoucy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Lia Sansoucy
UX Design Techdegree Graduate 16,070 Points
Lia Sansoucy
.a{fill-rule:evenodd;}techdegree seal-36
Lia Sansoucy
UX Design Techdegree Graduate 16,070 Points

ok, I am very new to this, but I know when I I tried using cmd+shift+r (clearing the cache) the image did not change. When I typed in the URL exactly as Treasure has is in the video ( no s) then it has a new image each time I refresh the page with no need to clear the cache. I can only report here what worked for me and what did not. Clearing did not work, but removing the s did.

Ok- it only worked a few times, and is now not changing the image. Thank you for your answer below, but that is amove what I am able to do, so I will just leave it with a static image for now. I feel like I am understanding the idea of the lesson, even if the mechanics are not working exactly the same as the video. I take comfort from the fact that others are also having this issue.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

I suspect the behavior you're seeing may be unique to your browser.

A trick you can use that should work on any browser is to add a bit of JavaScript to attach a query string onto the URL with a random number in it. Then it never matches anything in the cache.

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

Note that this particular example script only works on the first image on the page.