| Method Signatures and Parameters | |
Jt.image(String url) | url (String) A URL for a hosted image file. |
Jt.image(byte[] data) | data (byte[]) Raw image data. |
Jt.image(java.nio.file.Path filePath) | filePath (java.nio.file.Path) A path to a local image file. The path can be absolute or relative to the working directory. |
Jt.image(JtUploadedFile uploadedFile) | uploadedFile (io.javelit.core.JtUploadedFile) An uploaded file. |
Jt.imageFromBase64(String base64) | base64 (String) The Base64 encoded image string. |
Jt.imageFromSvg(String svg) | svg (String) No description |
| Chainable builder methods | |
caption(String caption) | Image caption. If this is |
width(String width) | The width of the element. This can be one of the following:
|
width(int widthPixels) | The width of the radio group in pixels. The element will have a fixed width. If the specified width is greater than the width of the parent container, the width of the element matches the width of the parent container. |
key(String key) | A string to use as the unique key for the widget. If this is omitted, a key will be generated for the widget based on its content. No two widgets may have the same key. |
Only applies to input widgets that have a provided | |
use() | Put the widget in the app, in the |
use(JtContainer container) | Put the widget in the app, in the provided container. |
Examples
Image from external URL
import io.javelit.core.Jt;
public class UrlImageApp {
public static void main(String[] args) {
Jt.image("https://raw.githubusercontent.com/javelit/public_assets/refs/heads/main/image/mountains2.jpg").use();
}
}
Image from static resource
package staticImageApp;
import io.javelit.core.Jt;
public class StaticImageApp {
public static void main(String[] args) {
// assume static/mountains.jpg is present in the working directory
Jt.image("app/static/mountains.jpg").use();
}
}
Image from raw data
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
import io.javelit.core.Jt;
public class ByteImageApp {
public static void main(String[] args) throws IOException {
byte[] imageBytes = generateHexagonImage();
Jt.image(imageBytes).use();
}
private static byte[] generateHexagonImage() throws IOException {
int width = 800;
int height = 400;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = image.createGraphics();
// Enable anti-aliasing for smoother edges
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// Light blue background
g2d.setColor(new Color(240, 248, 255));
g2d.fillRect(0, 0, width, height);
// Draw hexagon
int centerX = width / 2;
int centerY = height / 2;
int radius = 150;
int[] xPoints = new int[6];
int[] yPoints = new int[6];
for (int i = 0; i < 6; i++) {
double angle = Math.PI / 3 * i - Math.PI / 6;
xPoints[i] = centerX + (int) (radius * Math.cos(angle));
yPoints[i] = centerY + (int) (radius * Math.sin(angle));
}
// Fill hexagon with teal color
g2d.setColor(new Color(32, 178, 170));
g2d.fillPolygon(xPoints, yPoints, 6);
// Draw hexagon border
g2d.setColor(new Color(0, 128, 128));
g2d.setStroke(new BasicStroke(3));
g2d.drawPolygon(xPoints, yPoints, 6);
g2d.dispose();
// Convert to PNG bytes
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(image, "PNG", baos);
return baos.toByteArray();
}
}
Image from local file
import java.nio.file.Path;
import io.javelit.core.Jt;
public class FileImageApp {
public static void main(String[] args) {
// assumes mountains.jpg is present in the working directory
Jt.image(Path.of("mountains.jpg")).use();
}
}
Image from base64 string
import io.javelit.core.Jt;
public class Base64ImageApp {
public static void main(String[] args) {
String image = "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";
Jt.imageFromBase64(image).caption("A triangle").use();
}
}
From an SVG image
import io.javelit.core.Jt;
public class SvgImageApp {
public static void main(String[] args) {
String svg = """
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="#4CAF50" />
<path d="M 60 100 L 90 130 L 140 80" stroke="white" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
""";
Jt.imageFromSvg(svg).use();
}
}
Still have questions?
Go to our discussions forum for helpful information and advice from Javelit experts.