Java Swing adding images code in MigLayout does not seem to be working?

Question

So I have my own custom JFrame, and in it I am trying to create an auto-resizing image to be contained in my JFrame's content JPanel, frameContent. My layout manager for the JPanel is MigLayout, so I figured I would create a child of JPanel again, called ImagePanel. Here is what my ImagePanel class ended up looking like:

class ImagePanel extends JPanel{
    private static final long serialVersionUID = -5602032021645365870L;
    private BufferedImage image;

    public ImagePanel() {
        try {                
            image = ImageIO.read(new File(getClass().getResource("../res/Title.png").toURI()));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(image, getWidth(), getHeight(), null);      
    }

}

Now for some reason it doesn't seem like it's actually 'working'. When I am setting up my main JFrame's content, I call:

framecontent.add(new ImagePanel(),  "pos 5% 5% 95% 45%");

It's not that it's not adding the component, as with this code I'm able to get the following screen:

Notice how it outlines the area against the gray background, meaning the paintComponent(g) method is being run, and the program also isn't outputting any errors, which is strange, so that means it is finding my image, just not placing it.

Here is what my file hierarchy looks like:

Project Folder >
    src >
        res >
            Title.png (Picture I want to retrieve)
        guiwork >
            Working.class (Class that is running instructions/ main)

Got it all fixed up, here is the auto-resizing result:

Answer 1

Notice how it outlines the area against the gray background, meaning the paintComponent(g) method is being run, and the program also isn't outputting any errors, which is strange, so that means it is finding my image, just not placing it.

Not so as a null image will throw no errors. To prove this, test your image variable in the paintComponent method and you'll likely find that it is in fact null.

i.e., try this:

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    System.out.println("image is null: " + (image == null)); // TODO: Delete this
    g.drawImage(image, getWidth(), getHeight(), null);      
}

Solution: don't change your resource to a file, but instead use the resource as is, and make sure that you're looking for it in the correct location.

---

Edit
Oh chit, you're drawing your image beyond the bounds of your component:

g.drawImage(image, getWidth(), getHeight(), null);  

try:

g.drawImage(image, 0, 0, null);  

---

Edit 2
What if you try a simple test program, something like:

import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JOptionPane;

public class TestImage {
   public TestImage() throws IOException {
      String path = "/res/Title.png";
      BufferedImage img = ImageIO.read(getClass().getResource(path));
      ImageIcon icon = new ImageIcon(img);
      JOptionPane.showMessageDialog(null, icon);
   }
   public static void main(String[] args) {
      try {
         new TestImage();
      } catch (IOException e) {
         e.printStackTrace();
      }
   }
}

and be sure to place this in the same location as your current class. Does it run?

Answer 2

For those who might have trouble understanding HoverCraft's Answer:

Say you have a Panel in which you want to add an image that scales, the following code does that for you

import net.miginfocom.swing.MigLayout;
import javax.swing.*;
import java.awt.*;

public class MasterSlidePanel extends JPanel {
    private ImageIcon imageIcon;
    private JLabel image;

    public MasterSlidePanel() {
        super(new MigLayout("", "2% [] 2%", "2% [] 2%"));
    }

    @Override
    protected void paintComponent(Graphics g) {
        image.setIcon(new ImageIcon(imageIcon.getImage().getScaledInstance(image.getWidth(), image.getHeight(), Image.SCALE_SMOOTH)));
        super.paintComponent(g);
    }

    public void setImage(SlidePanel panel) {
        imageIcon = <Where you get the imageIcon>;
        image = new JLabel();
        image.setMinimumSize(new Dimension(10, 10));
        image.setPreferredSize(new Dimension(10, 10));
        this.add(image, "width 96%, height 96%");
    }
}

We add 2 new members to the panel, image and imageIcon. The moment when the application needs to paint the panel, a scaled inscance of the imageIcon is loaded and given to image.

To prevent 0 height/width errors, we add a minimumsize to the JLabel.

Hope this helps.

Credits still go to HoverCraft Full Of Eels.