Image not updating in Hangman game hosted on cloud storage

Other Questions Google drive
1

I made a Hangman game using HTML and JavaScript. It works fine on my computer but has issues when I put it on cloud storage. The game shows different pictures as you play. At the end it should show a ‘win.png’ or ‘lose.png’ image. This last picture change doesn’t happen when I play from the cloud.

Here’s the part that’s not working:

function endGame(result) {
  let finalImage = result === 'win' ? 'victory.png' : 'defeat.png';
  document.querySelector('#resultImage').src = `images/${finalImage}`;
  
  let message = result === 'win'
    ? 'Congrats! You guessed the word!'
    : `Game over. The word was: ${secretWord}`;
  
  alert(message);
  return true;
}

The alert shows up, but the image doesn’t change. Everything else in the game works as expected. I’m using Bootstrap, but I don’t think that’s causing the problem. Any ideas why this might be happening?

2

I’ve run into similar issues with cloud-hosted games before. One thing that often gets overlooked is CORS (Cross-Origin Resource Sharing) settings. If your images are stored in a different location than your HTML file, the browser might be blocking access for security reasons.

Try checking your cloud storage settings and ensure CORS is properly configured to allow access from your game’s domain. You might need to add your game’s URL to the allowed origins list.

Another potential fix is to use absolute URLs for your images instead of relative paths. So instead of images/${finalImage}, try using the full URL like https://your-cloud-storage.com/images/${finalImage}.

If those don’t work, you could also try using the onerror event on your image to catch and log any loading errors:

document.querySelector(‘#resultImage’).onerror = function() {
console.error(‘Failed to load image:’, this.src);
};

This might give you more insight into what’s going wrong. Hope this helps!

3

hey there zack! sounds like a caching issue. cloud storage can be tricky with dynamic content. try adding a random query parameter to ur image src like this:

src = images/${finalImage}?v=${Math.random()}

this should force the browser to fetch the new image. lmk if it helps!

4

Have you checked your browser’s console for any error messages? It’s possible there’s a path issue when accessing the images from cloud storage. Make sure your image paths are correct relative to where your HTML file is hosted.

Also, consider using the ‘Network’ tab in your browser’s developer tools to see if the image request is being made and what response you’re getting. This can help pinpoint if it’s a loading problem or if the image isn’t being found at all.

If the paths are correct, you might want to try preloading the images at the start of your game. This can ensure they’re cached and ready when needed:

function preloadImages() {
    new Image().src = 'images/victory.png';
    new Image().src = 'images/defeat.png';
}

Call this function when your game initializes. This approach often resolves issues with images not updating in dynamic web applications.