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

Sorry, by run into problems I mean will not display the second image at all. I added a screen shot. — Matthew Hanson, Sep 22 '17 at 02:51
hmmm I think it might be the image of the flag itself. I notice the chinese flag has transparency; could be something to do with that. — flakes, Sep 22 '17 at 03:00

score 2 · Answer 1 · answered Sep 24 '17 at 21:53

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.

I guess this has to do with the site trying to prevent web crawling? — flakes, Sep 24 '17 at 21:57
Ahh cool! Following the example [here](https://stackoverflow.com/a/16826459/3280538) you can get around it by overwriting the http agent! `System.setProperty("http.agent", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.29 Safari/537.36");` — flakes, Sep 24 '17 at 22:01
Exactly, you were faster! ;-) I just wanted to note that if you had a running tomcat (or any other web server) at hand, you could try calling some URL from the browser and from javafx and see the exact difference in the requests. — tomorrow, Sep 24 '17 at 22:04

JKostikiadis · Answer 2 · 2017-09-24T22:06:33.940

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

JavaFX displaying multiple images in grid pane

2 Answers2