如何在 Yew 中添加图像？

Question

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

我将 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 文件成功完成其工作。

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

主程序.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 关于如何添加图像的文档。

但医生对我没有帮助。

Answer 1

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

\n

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

\n

/home/me/code/my-yew-test\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80Cargo.lock \n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80Cargo.toml \n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80index.html \n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80src \n \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80main.rs \n \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80img \n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80rust.png \n

\n

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

\n

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

\n

该行不会出现在生产index.html文件中，它只是 trunk 的一条指令。

\n

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

\n

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

\n

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

\n

你的 dist 目录将如下所示：

\n

/home/me/code/my-yew-test\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80Cargo.lock \n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80Cargo.toml \n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80index.html \n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80src \n \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80main.rs \n \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80img \n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80rust.png \n

\n

Answer 2

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

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