Как показать изображение с помощью компонента ImageView в javafx и fxml?

Я полагаю, это очень простая вещь, но я просто не могу отстать от нее. Все, что я хочу, это показать изображение через ImageView, связанное с fxml. Вот мой код:

package application;

import java.io.File;

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


public class Main extends Application
{
    @FXML
    private ImageView imageView;

    @Override
    public void start(Stage primaryStage) 
    {
        try 
        {
        AnchorPane root = (AnchorPane)FXMLLoader.load(getClass().getResource("Sample.fxml"));
        Scene scene = new Scene(root,400,400);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setTitle("Hello World");

        File file = new File("src/Box13.jpg");
        Image image = new Image(file.toURI().toString());
        imageView = new ImageView(image);

        //root.getChildren().add(imageView);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}

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

И мой файл fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="316.0" prefWidth="321.0" xmlns:fx="http://javafx.com/fxml/1"     xmlns="http://javafx.com/javafx/2.2" fx:controller="application.SampleController">
  <children>
    <ImageView fx:id="imageView" fitHeight="150.0" fitWidth="200.0" layoutX="61.0" layoutY="83.0" pickOnBounds="true" preserveRatio="true" >

    </ImageView>
  </children>
</AnchorPane>

Не должно быть никаких проблем с привязкой файла, поскольку он отлично работает, когда я включаю outcommented line. Это было бы так, как это делалось только в java, но я хочу использовать fxml здесь, поскольку я использую fxml для всех других компонентов, но он просто не работает для ImageView, и я не знаю почему. Я также попытался создать новый класс контроллера и связать ImageView там, но не работает. Кто-нибудь может мне помочь?

Спасибо

Ответы

Ответ 1

Если вы хотите использовать FXML, вы должны отделить контроллер (как вы делали с SampleController). Тогда ваш fx:controller в вашем FXML должен указать на это.

Вероятно, в вашем контроллере отсутствует метод initialize, который является частью интерфейса Initializable. Этот метод вызывается после загрузки FXML, поэтому я рекомендую вам установить его изображение.

Ваш класс SampleController должен быть примерно таким:

public class SampleController implements Initializable {

    @FXML
    private ImageView imageView;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        File file = new File("src/Box13.jpg");
        Image image = new Image(file.toURI().toString());
        imageView.setImage(image);
    }
}

Я тестировал здесь, и он работает.

Ответ 2

Вам не нужен инициализатор, если вы не динамически загружаете другое изображение каждый раз. Я думаю, что сделать как можно больше в fxml более организованным. Вот файл fxml, который сделает то, что вам нужно.

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>

<AnchorPane
    xmlns:fx="http://javafx.co/fxml/1"
    xmlns="http://javafx.com/javafx/2.2"
    fx:controller="application.SampleController"
    prefHeight="316.0"
    prefWidth="321.0"
    >
    <children>
        <ImageView
                fx:id="imageView"
                fitHeight="150.0"
                fitWidth="200.0"
                layoutX="61.0"
                layoutY="83.0"
                pickOnBounds="true"
                preserveRatio="true"
            >
            <image>
                <Image
                    url="src/Box13.jpg"
                    backgroundLoading="true"
                    />
            </image>
        </ImageView>
    </children>
</AnchorPane>

Указание свойства backgroundLoading в теге Image необязательно, по умолчанию оно равно false. Лучше всего установить backgroundLoading true, когда на загрузку изображения требуется больше времени или дольше, и таким образом заполнитель будет использоваться до тех пор, пока изображение не загрузится, и программа не будет заморожена во время загрузки.

Ответ 3

@FXML
ImageView image;

@Override
public void initialize(URL url, ResourceBundle rb) {
  image.setImage(new Image ("/about.jpg"));
}

Ответ 4

Кодовая часть:

Image imProfile = new Image(getClass().getResourceAsStream("/img/profile128.png"));

ImageView profileImage=new ImageView(imProfile);

в javafx maven:

Ответ 5

Ниже приведен пример загрузки изображения с помощью JavaFX.

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.image.Image;
    import javafx.scene.image.ImageView;
    import javafx.scene.layout.StackPane;
    import javafx.stage.Stage;

    public class LoadImage extends Application {

    public static void main(String[] args) {
    Application.launch(args);
    }
    @Override
    public void start(Stage primaryStage) {
    primaryStage.setTitle("Load Image");

    StackPane sp = new StackPane();
    Image img = new Image("javafx.jpg");
    ImageView imgView = new ImageView(img);
    sp.getChildren().add(imgView);

    //Adding HBox to the scene
    Scene scene = new Scene(sp);
    primaryStage.setScene(scene);
    primaryStage.show();
    }

  }

Создайте одну исходную папку с именем Image в своем проекте и добавьте свое изображение в эту папку, иначе вы можете напрямую загрузить изображение с внешнего URL-адреса, как показано ниже.

Изображение img = новое изображение ( "http://mikecann.co.uk/wp-content/uploads/2009/12/javafx_logo_color_1.jpg" );

Ответ 6

Рекомендуется поместить изображение в ресурсы, чем вы можете использовать его следующим образом:

imageView = new ImageView("/gui.img/img.jpg");

Ответ 7

SRC/образец/изображения /shopp.png

**
    Parent root =new StackPane();
    ImageView ımageView=new ImageView(new Image(getClass().getResourceAsStream("images/shopp.png")));
    ((StackPane) root).getChildren().add(ımageView);

**