Leptos Image

灵感来自Next.js制作

图片对网站的体积和性能有重大影响，为什么不把它们做到最好呢？

请输入 Leptos <Image/> 组件，这是一个增强标准HTML <img> 元素的自动图像优化功能的组件。

特性

• 大小优化：自动调整图像大小并将其转换为现代 .webp 格式，以实现大小和质量的最佳平衡。
• 低质量图像占位符（LQIP）：将原始图像提取的SVG占位符嵌入到服务器端渲染的HTML中，在图像加载期间提高感知性能。
• 更快地加载页面：通过在文档头部添加预加载 <link> 元素，优先加载关键图像，影响最大内容渲染时间（LCP），通过 priority 属性加速加载时间。

Leptos和Leptos Image的版本兼容性

下表显示了每个 leptos 版本对 leptos_image 的兼容版本。请确保您使用兼容版本，以避免潜在的问题。

安装

要将 leptos_image 添加到您的项目中，请使用 cargo

cargo add leptos_image --optional

在您的 Cargo.toml 中启用SSR功能

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

hydrate = [
    "leptos_image/hydrate", 
    # other dependencies...
]

快速入门

这需要SSR + Leptos Axum集成

1. 提供图像上下文：使用 leptos_image::provide_image_context 初始化您的Leptos应用程序，以授予它读取图像缓存的权限。

   use leptos::*;
   
   #[component]
   fn App() -> impl IntoView {
       leptos_image::provide_image_context();
       // Your app content here
   }
   

2. Axum状态配置：将 ImageOptimizer 集成到您的应用状态中。

   // Composite App State with the optimizer and leptos options.
   #[derive(Clone, axum::extract::FromRef)]
   struct AppState {
       leptos_options: leptos::LeptosOptions,
       optimizer: leptos_image::ImageOptimizer,
   }
   
   

3. 与路由器集成：确保您的 ImageOptimizer 在Leptos应用的SSR期间可用。

   • 添加图像缓存路由：使用 image_cache_route 提供缓存图像。
   • 将 ImageOptimizer 添加到您的应用状态中。
   • 将 ImageOptimizer 添加到 Leptos 上下文：使用 leptos_routes_with_context 将优化器提供给 Leptos 上下文。

   use leptos::*;
   use leptos_axum::*;
   use leptos_image::*;
   
   async fn main() {
       // Get Leptos options from configuration.
       let conf = get_configuration(None).await.unwrap();
       let leptos_options = conf.leptos_options;
       let root = leptos_options.site_root.clone();
   
       // Create App State with ImageOptimizer.
       let state = AppState {
           leptos_options,
           optimizer: ImageOptimizer::new("/__cache/image", root, 1),
       };
   
       // Create your router
       let app = Router::new()
           .route("/api/*fn_name", post(handle_server_fns))
            // Add a handler for serving the cached images.
           .image_cache_route(&state)
           // Provide the optimizer to leptos context.
           .leptos_routes_with_context(&state, routes, state.optimizer.provide_context(), App)
           .fallback(fallback_handler)
           // Provide the state to the app.
           .with_state(state);
   }
   

完整的示例代码位于 examples 目录。

现在您可以在您的应用中的任何地方使用 Image 组件了！

#[component]
pub fn MyImage() -> impl IntoView {
    view! {
        <Image
            src="/cute_ferris.png"
            blur=true
            width=750
            height=500
            quality=85
        />
    }
}

此配置确保您的 Leptos 应用程序完全准备好提供优化后的图像，从而提高您 Web 项目的性能和用户体验。