Problem displaying img as part of Local Weather app

Problem displaying img as part of Local Weather app



I’m working my way through the Local Weather app and am stuck and need some community support. :smiley:

In my html file I have a div set-up for the weather icon image:

<div id="weather-icon-placeholder"></div>

In my Javascript file, I am using the returned JSONP from an AJAX call to create variables and then display the correct icon in the div.

Now if I hard code in an image like this it displays the image:

$('#weather-icon-placeholder').html('<img src="/images/partly-cloudy-night.png" >'); // hard coded, it displays the image

But if I try to create a variable so the weather icon is dynamically selected, I get a 404 error message saying it can’t find the images folder:

var imagePNG = weather.currently.icon + '.png';
	console.log(imagePNG); // partly-cloudy-night.png
	$('#weather-icon-placeholder').html('<img src="/images/" + imagePNG >'); // this returns a 404 error, can't find images folder

For those who would like more context, here is the URL to the JS file.

Appreciate any guidance on why this isn’t working, thanks!


$('#weather-icon-placeholder').html('<img src="/images/" + imagePNG >');

I believe this should be:

$('#weather-icon-placeholder').html('<img src="/images/"' + imagePNG + '>');

You need to close your double quotes with a single quote then wrap your closing tag and concatenate.

Let me know if that doesn’t solve it.


Looking at it again, I think I solved part of the issue; the other is that your js file is inside a scripts folder, so I think it’s looking within that folder for your images folder. You’d need to go up one level in your img src which you do with a preceding ‘…’, i.e.:

<img src="../images/etc"


Hey @JKatras, this was the error. Thanks for your help, really appreciated! :smiley: