Leptos Image

受Next.js启发

图片对网站的大小和性能有重大影响，所以为什么不做得更好呢？

进入Leptos <Image/>，这是一个组件，它增强了标准的HTML <img> 元素，并具有自动图片优化功能。

• 尺寸优化：调整图片大小，并使用现代 .webp 格式以实现最佳大小和质量。
• 低质量图片占位符（LQIP）：使用此功能，图片组件将原始图片中提取的SVG嵌入到初始SSR HTML中。在优化版本加载期间显示此占位符。
• 更快页面加载：使用具有 priority 属性的 priority 属性优先显示关键图片，例如对最大内容绘制（LCP）有贡献的图片。该组件将预加载 <link> 添加到文档头部，提高加载时间并提升网站性能。

安装

使用cargo添加leptos_image

cargo add leptos_image

在您的 Cargo.toml 中添加 [features] 下的SSR功能

[features]
ssr = [
    "leptos_image/ssr",
    # ...
 ]

快速入门

需要SSR + AXUM （现在支持SSR + Actix-web）

首先将提供者添加到Leptos App的底部。

use leptos_image::*;

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    provide_image_context(cx);

    view!{
        // ...
    }
}

然后转到您的 main.rs 中的SSR主函数。

在您创建路由之前，使用项目根目录调用 cache_app_images 函数。这将缓存您的应用程序中的所有图片，并生成LQIPs。

如果您有很多图片，那么您可能只需要在生产环境中调用此函数，因为它将延迟您的服务器启动。

如果您不包含此函数，则图像缓存将在运行时发生。

// AXUM
use leptos::*;
use leptos_image::*;

let conf = get_configuration(None).await.unwrap();
let leptos_options = conf.leptos_options;
let root = leptos_options.site_root.clone();

use leptos_image::cache::cache_app_images;

cache_app_images(root, || view! {<App/>}, 2, || (), || ())
    .await
    .expect("Failed to cache images");

// ACTIX_WEB
async fn main() -> std::io::Result<()> {
    use actix_files::Files;
    use actix_web::*;
    use image_example_actix::app::*;
    use leptos::*;
    use leptos_actix::{generate_route_list, LeptosRoutes};
    use leptos_image::*;

    let conf = get_configuration(None).await.unwrap();
    let addr = conf.leptos_options.site_addr;
    // Generate the list of routes in your Leptos App
    let routes = generate_route_list(App);
    println!("listening on http://{}", &addr);
    let root = conf.leptos_options.site_root.clone();

    // run cache app images only in server

    cache_app_images(root, || view! { <App/>}, 2, || (), || ())
        .await
        .expect("Failed to cache images");

接下来，向您的路由器添加一个用于提供缓存的图片的端点。目前，端点路径必须是 /cache/image 且不可配置

let router = Router::new()
        .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
        .leptos_routes(&leptos_options, routes, |cx| {
            view! {
                <App/>
            }
        })
        // Here's the new route!
        .route("/cache/image", get(image_cache_handler))
        .with_state(leptos_options);

//ACTIX_WEB
    HttpServer::new(move || {
        let leptos_options = &conf.leptos_options;
        let site_root = &leptos_options.site_root;

        App::new()
            .app_data(web::Data::new(leptos_options.to_owned()))
            .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
            .service(Files::new("/assets", site_root))
            .leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
            .service(Files::new("/pkg", format!("{site_root}/pkg")))
            // serve other assets from the `assets` directory
            .route("/cache/image", web::get().to(actix_handler))
            // serve JS/WASM/CSS from `pkg`
            // serve the favicon from /favicon.ico
            .service(favicon)

        //.wrap(middleware::Compress::default())
    })
    .bind(&addr)?
    .run()
    .await

现在您可以在应用程序的任何地方使用图片组件了！

#[component]
pub fn MyPage(cx: Scope) -> impl IntoView {
    view! {
        <Title text="This Rust thing is pretty great"/>
        <Image
            src="/cute_ferris.png"
            blur=true
            width=750
            height=500
            quality=85
        />
    }
}

就是这样。您已经准备好使用图片组件了。

注意事项

• 图片将只从非动态路由（意味着路由路径中不是 api/post/:id）中检索。
• 图片优化可能需要几秒钟，这意味着服务器的第一次启动将会更慢。

本项目从 leptos_image 分支出来的。