5

我正在使用 Rust 构建一个简单的 Web 应用程序，并且正在尝试向网站显示图像。但我无法添加该图像。

我将 Rust 与一个名为Yew的框架和一个工具Trunk一起使用。

我已使用Trunk成功地将 .scss 文件链接到我的网站。正如他们在文档中描述的那样。

索引.html

<!DOCTYPE HTML> 
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yew Development</title>
    <link data-trunk="" rel="scss" href="main.scss"> <!-- Successfull linked to this file -->
</head>

<body></body>

</html>

.scss 文件成功完成其工作。

但是如何使用html!宏显示带有 Rust 文件的图像？

main.rs

use yew::prelude::*;

fn main() {
    yew::start_app::<App>();
}

#[function_component(App)]
fn app() -> Html {
    html! {
        <>
            <h1> {"Hello world!"}</h1>
            <link data-trunk="true" rel="copy-file" href="img/rust.png"/> // doesn't work
            <img data-trunk="true" src="img/rust.png" alt="rust image"/> // doesn't work
            <img src="img/rust.png" alt="rust image"/> // doesn't work
        </>
    }
}

Trunk 关于如何添加图像的文档。

但是医生对我没有帮助。

4

3 回答 3

3

您必须做的是指示trunk 将您的静态资产复制到dist目录中。

假设您有一个包含所有图像的目录，位于项目根目录的img旁边：src

/home/me/code/my-yew-test
 ├──Cargo.lock 
 ├──Cargo.toml 
 ├──index.html 
 ├──src 
 │  └──main.rs 
 └──img 
    └──rust.png

将此行添加到您的index.html标题中：

<link data-trunk rel="copy-dir" href="img">

此行不会出现在生产index.html文件中，它只是主干的说明。

现在img目录的文件将由主干提供（并复制到dist生产目录中），因此您可以在html!宏中包含此链接：

<img src="img/rust.png" alt="rust image"/>

data-trunk这里的属性没有任何意义：trunk 只读取和解析index.html文件，它看不到html!宏生成的 wasm 代码在客户端生成了什么。

您的 dist 目录将如下所示：

    /home/me/code/my-yew-test
     ├──Cargo.lock 
     ├──Cargo.toml 
     ├──dist 
     │  ├──dysp-8a629f50b28a5e37.css 
     │  ├──index-8c2be3ebf3bd7075.js 
     │  ├──index-8c2be3ebf3bd7075_bg.wasm 
     │  ├──index.html 
     │  └──img
     │     └──rust.png
     ├──index.html 
     ├──src 
     │  └──main.rs 
     └──img 
        └──rust.png
于 2021-12-10T17:51:49.010 回答
3

所有<link data-trunk ... />元素必须在静态 HTML 文件（例如 index.html）中，而不是通过html!. 这是因为 Trunk 作为后端进程运行，以确定作为主应用程序的一部分分发的确切内容，这是一个必须提前完成的进程。

在 Trunk 已经完成复制和处理预期资产的工作之后，尝试在之后添加link元素将尝试将资产作为应用程序的一部分包含在内，因此它不起作用。相反，在 index.html 中定义您需要的所有资产，最好在元素中定义，然后您将可以通过路径（例如）head在应用程序中自由使用它们。image/rust.png

于 2021-12-10T18:02:43.627 回答
0

您应该做的是使路径相对。假设这是您的目录结构：

/home/me/code/my-yew-test
├── Cargo.lock
├── Cargo.toml
├── index.html
├── img
│   └── rust.png
├── README.md
└── src
    └── main.rs

在index.html文件中，您应该为要编译的资源添加相对文件夹/文件路径。用于复制整个文件夹并使用 main.rs 中的图像：

<!--in index.html-->
<link data-trunk rel="copy-dir" href="./img"/>

// in main.rs
html!{
    <img src="img/rust.png" alt="rust image"/> 
}
于 2022-03-03T15:38:38.507 回答