GPUI

Img

The img element allows you to render an image, it takes a Into<ImageSource>. To learn how to style a image go to the styling image chapter.

Creating a Img

This example uses a file system path as the image, but you may use any other ImageSource instead. The CARGO_MANIFEST_DIR environment variable is used here to easily access the image.png in the project root folder as a example.

use std::path::Path;

use gpui::{
    AppContext, Application, Context, IntoElement, ParentElement, Render, Styled, Window,
    WindowOptions, div, img,
};

struct RootView;

impl Render for RootView {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .size_full()
            .child(img(Path::new(env!("CARGO_MANIFEST_DIR")).join("image.png")).size_full())
    }
}

fn main() {
    Application::new().run(|app| {
        app.open_window(WindowOptions::default(), |_window, app| {
            app.new(|_cx| RootView)
        })
        .unwrap();
    });
}

Using include_bytes

use gpui::{Image, img, prelude::*};

const ICON_DATA: &[u8] = include_bytes!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/icon.svg"));

fn render() -> impl IntoElement {
    let image = Arc::new(Image::from_bytes(
        gpui::ImageFormat::Svg,
        ICON_DATA.to_vec(),
    ));

    img(image)
}