如何在 Yew 中添加图像？

Den*_*ret 5

您必须做的是指示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 
 ???index.html 
 ???src 
 ?  ???main.rs 
 ???img 
    ???rust.png