JavaFX displaying multiple images in grid pane

Question

I am trying to make a simple program displaying 4 images in a grid pane. I get one in there no problem but once I attempt to add a second I run into some problems. Here is my code:

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{

        GridPane gridPane = new GridPane();

        gridPane.add(new ImageView(new Image ("http://gifimage.net/wp-content/uploads/2017/06/american-flag-gif-13.gif")), 1,1);
        gridPane.add(new ImageView(new Image ("http://bestanimations.com/Flags/Asia/china/chinese-flag-waving-gif-animation-10.gif")), 2,2);

        Scene scene = new Scene(gridPane, 1000, 500);
        primaryStage.setTitle("Flags");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        Application.launch(args);
    }
}

I think it might be an issue with the row and column after the image but I have tried a few things and not been successful. Any help is greatly appreciated. Thanks

Answer 1

flakes is kind of right but it's not the image itself, it's its availability. If I open the url of the Chinese flag in the browser, everything is ok, but try the modified code:

package sample;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Image imgUsa = new Image ("http://gifimage.net/wp-content/uploads/2017/06/american-flag-gif-13.gif");
        Image imgChina = new Image ("http://bestanimations.com/Flags/Asia/china/chinese-flag-waving-gif-animation-10.gif");

        ImageView ivUsa = new ImageView(imgUsa);
        ImageView ivChina = new ImageView(imgChina);


        TextField errorText = new TextField();
        if (imgChina.isError()) {
            errorText.setText(imgChina.getException().getMessage());
        }

        VBox root = new VBox(ivUsa, ivChina, errorText);

        Scene scene = new Scene(root, 1000, 500);
        primaryStage.setTitle("Flags");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        Application.launch(args);
    }
}

...what I get in the TextField is:

Server returned HTTP response code: 403 for URL: http://bestanimations.com/Flags/Asia/china/chinese-flag-waving-gif-animation-10.gif

HTTP 403 - access forbidden

And that seems to be the culprit.

Answer 2

There is nothing wrong with the code. The problem lies on the second gif image. If for example you download it and load it from project resources it will load correctly. Now why you can't "access" the gif from url is another thing.. I will check it and if i find something i will edit this answer.

Edit :

Doing some debugging if you use the above code to load the images :

gridPane.add( new ImageView(new Image(new URL( "http://gifimage.net/wp-content/uploads/2017/06/american-flag-gif-13.gif").openStream())), 0,
                0);
gridPane.add(new ImageView(new Image(new URL("http://bestanimations.com/Flags/Asia/china/chinese-flag-waving-gif-animation-10.gif").openStream())),0, 1);

You will see that the second gif will give you an error java.io.IOException with Server returned HTTP response code: 403 for URL ...

So i guess the server doesn't 'give' access to the gif image through http requests, that's why you can't load it. I am not a 'professional' when it comes about Https request so I might be wrong.

403 Forbidden with Java but not web browser?

With the above post you can modify your code a bit and load it find :

URL url = new URL("http://bestanimations.com/Flags/Asia/china/chinese-flag-waving-gif-animation-10.gif");
URLConnection conn = url.openConnection();
conn.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11");

conn.connect();

GridPane gridPane = new GridPane();

gridPane.add(new ImageView(new Image(new URL("http://gifimage.net/wp-content/uploads/2017/06/american-flag-gif-13.gif").openStream())), 0,0);
gridPane.add(new ImageView(new Image(conn.getInputStream())), 0, 1);

I can't catch up with @flakes @tomorrow :P