Java program images not showing up

Question

I am trying to create a whack-a-mole type of game in Java but when I run my program the images do not show up.

Here is my code so far and I will add the images as well. I am also fairly new to coding so this might be an easy fix.

kuronomi.gif

kitty.gif

This is what I see when I run my program

import java.awt.*;
import java.awt.event.*;
import java.util.Random;
import javax.swing.*;

public class hellokitty {
    int screenWidth = 700;
    int screenHeight = 800;
    
    JFrame frame = new JFrame("Catch Hello Kitty!");
    JLabel textL = new JLabel();
    JPanel textP = new JPanel();
    JPanel boardP = new JPanel();
    
    JButton[] board = new JButton[9];
    ImageIcon kittyIcon;
    ImageIcon kuroIcon;
    
    JButton currentKittyTile;
    JButton currentKurTile;
    
    Random r = new Random();
    Timer setKittyTimer;
    Timer setKuroTimer;

    hellokitty(){
        //frame.setVisible(true);
        frame.setSize(screenWidth, screenHeight);
        frame.setLocationRelativeTo(null);
        frame.setResizable(false);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new BorderLayout());
    
        textL.setFont(new Font("Comic Sans MS", Font.PLAIN, 70));
        textL.setHorizontalAlignment(JLabel.CENTER);
        textL.setText("Score: 0");
        textL.setOpaque(true);
    
        textP.setLayout(new BorderLayout());
        textP.add(textL);
        frame.add(textP, BorderLayout.NORTH);
    
        boardP.setLayout(new GridLayout(3,3));
        boardP.setBackground(Color.pink);
        frame.add(boardP);
    
        Image KittyImg = new ImageIcon(getClass().getResource("./kitty.gif")).getImage();
        kittyIcon = new ImageIcon(KittyImg.getScaledInstance(150, 150, java.awt.Image.SCALE_SMOOTH));
    
        Image KuronomiImg = new ImageIcon(getClass().getResource("./kuronomi.gif")).getImage();
        kuroIcon = new ImageIcon(KuronomiImg.getScaledInstance(150, 150, java.awt.Image.SCALE_SMOOTH));

        for (int i = 0; i < 9; i ++){
            JButton tile = new JButton();
            board[i] = tile;
            boardP.add(tile);
           // tile.setIcon(kuroIcon);
            tile.setFocusable(false);
        }

        setKittyTimer = new Timer(1000, new ActionListener() {
            public void actionPerformed(ActionEvent e) {
            if (currentKittyTile != null) {
                currentKittyTile.setIcon(null);
                currentKittyTile = null;
            }
    
            int num = r.nextInt(9); 
            JButton tile = board[num];
    
            currentKittyTile = tile;
            currentKittyTile.setIcon(kittyIcon);
            }
        });
    
        setKuroTimer = new Timer(1500, new ActionListener() {
            public void actionPerformed(ActionEvent e){
                if (currentKurTile != null){
                    currentKurTile.setIcon(null);
                    currentKurTile = null;
                }
    
                int num = r.nextInt(9);
                JButton tile = board[num];
    
                currentKurTile = tile;
                currentKurTile.setIcon(kuroIcon);
            }
        });
    
        setKittyTimer.start();
        setKuroTimer.start();
        frame.setVisible(true);
    }
}

Answer 1

First of all, the easiest way to use getResource is to put the resource in the same folder as the associated .class file. In your case that would mean putting files kitty.gif and kuronomi.gif in the same folder as file hellokitty.class. Then the URL of the resource can be obtained by calling:

getClass().getResource("kitty.gif");

But even after you successfully obtain the resource, scaling the image as you do in your code will not work¹. I am referring to these lines of your code:

Image KittyImg = new ImageIcon(getClass().getResource("kitty.gif")).getImage();
kittyIcon = new ImageIcon(KittyImg.getScaledInstance(150, 150, java.awt.Image.SCALE_SMOOTH));

Instead I used BufferedImage. Refer to Why getScaledInstance() does not work?

Here is my rewrite of your code – including a main method that uses a lambda expression. Also I changed some of the identifiers so that they adhere to Java naming conventions.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.GridLayout;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.IOException;
import java.net.URL;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.Timer;

public class HelloKitty {
    int screenWidth = 700;
    int screenHeight = 800;

    JFrame frame = new JFrame("Catch Hello Kitty!");
    JLabel textL = new JLabel();
    JPanel textP = new JPanel();
    JPanel boardP = new JPanel();

    JButton[] board = new JButton[9];
    ImageIcon kittyIcon;
    ImageIcon kuroIcon;

    JButton currentKittyTile;
    JButton currentKurTile;

    Random r = new Random();
    Timer setKittyTimer;
    Timer setKuroTimer;

    HelloKitty() {
        // frame.setVisible(true);
        frame.setSize(screenWidth, screenHeight);
        frame.setLocationRelativeTo(null);
        frame.setResizable(false);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new BorderLayout());

        textL.setFont(new Font("Comic Sans MS", Font.PLAIN, 70));
        textL.setHorizontalAlignment(JLabel.CENTER);
        textL.setText("Score: 0");
        textL.setOpaque(true);

        textP.setLayout(new BorderLayout());
        textP.add(textL);
        frame.add(textP, BorderLayout.NORTH);

        boardP.setLayout(new GridLayout(3, 3));
        boardP.setBackground(Color.pink);
        frame.add(boardP);

        URL url = getClass().getResource("kitty.gif");
        URL url2 = getClass().getResource("kuronomi.gif");
        try {
            Image img = ImageIO.read(url);
            Image kittyImg = img.getScaledInstance(150, 150, Image.SCALE_SMOOTH);
            kittyIcon = new ImageIcon(kittyImg);
            Image img2 = ImageIO.read(url2);
            Image kuronomiImg = img2.getScaledInstance(150, 150, Image.SCALE_SMOOTH);
            kuroIcon = new ImageIcon(kuronomiImg);
            for (int i = 0; i < 9; i++) {
                JButton tile = new JButton();
                board[i] = tile;
                boardP.add(tile);
                tile.setFocusable(false);
            }
        }
        catch (IOException xIo) {
            throw new RuntimeException(xIo);
        }

        setKittyTimer = new Timer(1000, new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                if (currentKittyTile != null) {
                    currentKittyTile.setIcon(null);
                    currentKittyTile = null;
                }

                int num = r.nextInt(9);
                JButton tile = board[num];

                currentKittyTile = tile;
                currentKittyTile.setIcon(kittyIcon);
            }
        });

        setKuroTimer = new Timer(1500, new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                if (currentKurTile != null) {
                    currentKurTile.setIcon(null);
                    currentKurTile = null;
                }

                int num = r.nextInt(9);
                JButton tile = board[num];

                currentKurTile = tile;
                currentKurTile.setIcon(kuroIcon);
            }
        });

        setKittyTimer.start();
        setKuroTimer.start();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        EventQueue.invokeLater(() -> new HelloKitty());
    }
}

Here is a screen capture of the running app. Of-course the tiles that contain images change all the time due to your timers.

Now I guess you need to write ActionListeners to update the score whenever the user successfully "whacks a mole".

¹I could not discover why.