egui教程四——加载图片，设置图标本文介绍如何在egui开发的程序中加入图片元素，加入图片需要额外引入其他库。这里为了

本文介绍如何在egui开发的程序中加入图片元素，加入图片需要额外引入其他库。这里为了方便起见，把Cargo.toml文件中的内容全部粘贴过来。

[package]
name = "picpic"
version = "0.1.0"
edition = "2021"

[dependencies]
eframe = "0.29.1"
# 注意下面这一行必须这样写。如果只是cargo add egui_extras,会没有features = ["all_loaders"]，后面在写程序时不会报错，但是程序运行时会提示加载图片失败。
egui_extras = { version = "0.29.1", features = ["all_loaders"] }
image = "0.25.2"

程序代码

同样的，下面的程序代码会含有之前几篇教程的全部代码，在第三篇教程的基础上添加了加载图片的代码。

不管是显示图片还是，将图片作为button的icon，使用原理都是一致的，所以下面的代码中仅仅以后者作为案例进行演示。

下述代码是将第三篇中讲的切换主题的两个按钮功能加入到了一个settings按钮当中了，点击按钮可以选择亮色或者暗色，settings使用svg图片进行呈现。

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
#![allow(rustdoc::missing_crate_level_docs)] // it's an example

use eframe::egui;

fn main() -> eframe::Result {
    let options = eframe::NativeOptions {
        viewport: egui::ViewportBuilder::default().with_inner_size([640.0, 480.0]),
        ..Default::default()
    };
    eframe::run_native(
        "picpic",
        options,
        Box::new(|cc| {
            // 添加图片支持
            egui_extras::install_image_loaders(&cc.egui_ctx);
            Ok(Box::new(PicPicApp::new(cc)))
        }),
    )
}

struct PicPicApp {
    name: String,
    age: u32,
}

impl PicPicApp {
    fn new(cc: &eframe::CreationContext<'_>) -> Self {
        setup_custom_fonts(&cc.egui_ctx);
        Self {
            name: "Aspirin".to_owned(),
            age: 18,
        }
    }

    // 切换主题
    fn theme_switcher(&mut self, ui: &mut egui::Ui, ctx: &egui::Context) {
        ui.horizontal(|ui| {
            // 将图片加载到内存（确保图片真实存在）
            let img = egui::include_image!("../static/icons/settings.svg");
            //将加载的图片传递给作为参数
            ui.menu_image_button(img, |ui| {
                if ui.button("Dark").clicked() {
                    ctx.set_visuals(egui::Visuals::dark());
                }
                if ui.button("Light").clicked() {
                    ctx.set_visuals(egui::Visuals::light());
                }
            });
        });
    }
}

impl eframe::App for PicPicApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            // 在更新方法中调用切换主题的方法
            self.theme_switcher(ui, ctx);

            ui.horizontal(|ui| {
                let name_label = ui.label("Your name: ");
                ui.text_edit_singleline(&mut self.name)
                    .labelled_by(name_label.id);
            });
            ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));
            if ui.button("Increment").clicked() {
                self.age += 1;
            }
            ui.label(format!("Hello '{}', age {}", self.name, self.age));
        });
    }
}

//设置字体
fn setup_custom_fonts(ctx: &egui::Context) {
    // Start with the default fonts (we will be adding to them rather than replacing them).
    let mut fonts = egui::FontDefinitions::default();

    // Install my own font (maybe supporting non-latin characters).
    // .ttf and .otf files supported.
    fonts.font_data.insert(
        "my_font".to_owned(),
        egui::FontData::from_static(include_bytes!(
            "../static/fonts/FangZhengFangSongJianTi.ttf"
        )),
    );

    // Put my font first (highest priority) for proportional text:
    fonts
        .families
        .entry(egui::FontFamily::Proportional)
        .or_default()
        .insert(0, "my_font".to_owned());

    // Put my font as last fallback for monospace:
    fonts
        .families
        .entry(egui::FontFamily::Monospace)
        .or_default()
        .push("my_font".to_owned());

    // Tell egui to use these fonts:
    ctx.set_fonts(fonts);
}

系统截图

下面是系统截图

总结

在实现该功能的时候遇到的主要的坑就是，执行了cargo add egui_extras安装了依赖，但是没有添加features = ["all_loaders"]导致运行程序报错Failed loading bytes://../static/icons/settings.svg: No image loaders are install，图片一直加载不出来。