Curso de JavaFX | 11. Insertar imagen

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

En esta lección aprenderemos cómo insertar imágenes en una aplicación JavaFX. Para esto, utilizaremos las clases Image y ImageView, que permiten cargar y mostrar imágenes de manera sencilla. Este proceso es útil para enriquecer visualmente nuestras aplicaciones.

Estructura del proyecto

Antes de empezar, asegúrate de organizar correctamente tu proyecto:

1. Crear una carpeta para las imágenes:
   • Dentro de la carpeta src, crea una subcarpeta llamada images.
   • Coloca las imágenes que quieres usar en esta carpeta. Por ejemplo: perro.jpg.
2. Verifica la ruta relativa:
   • Las rutas de las imágenes deben ser relativas al directorio del proyecto.

Cargar y mostrar una imagen

El siguiente código muestra cómo cargar y visualizar una imagen:

Image img = new Image("/images/perro.jpg");
ImageView imgView = new ImageView(img);

Explicación:

Clase ImageView:
Sirve para mostrar la imagen en la interfaz. Puedes personalizar su tamaño, escala, y otros atributos visuales.

Clase Image:
Se utiliza para cargar la imagen desde una ruta relativa o absoluta.

En este caso, /images/perro.jpg indica que la imagen está en la carpeta images dentro de src.

Agregar la imagen a la interfaz

Para integrar la imagen en la interfaz gráfica, puedes usar un contenedor como VBox o HBox y añadir el ImageView:

VBox root = new VBox();
root.getChildren().add(imgView);

Scene scene = new Scene(root, 400, 400);
primaryStage.setScene(scene);
primaryStage.show();

Opciones adicionales con ImageView

Puedes personalizar la visualización de la imagen usando los métodos de ImageView:

1. Tamaño personalizado: Cambiar el ancho y alto de la imagen:

imgView.setFitWidth(200);
imgView.setFitHeight(200);

2. Mantener la proporción: Evitar distorsión de la imagen:

imgView.setPreserveRatio(true);

3. Rotación: Girar la imagen:

imgView.setRotate(45);

¡Con esto ya puedes insertar imágenes en tus proyectos JavaFX! Experimenta con diferentes tamaños y estilos para mejorar la apariencia de tus aplicaciones. 🚀