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:

1 Like