Raylib-Rust游戏编译为WASM后浏览器中资源加载失败求助

一、修复当前预加载资源的路径问题 #

你当前使用--preload-file src/resources编译，但WASM无法找到资源，核心问题是预加载路径映射与代码中的路径不匹配，同时存在对预加载机制的误解：

1. 预加载资源不需要单独部署到服务器：--preload-file会把src/resources目录打包到Emscripten生成的.data文件中，运行时自动挂载到虚拟文件系统，无需手动将src/resources放到服务器根目录。
2. 调整预加载路径映射：修改编译参数，将src/resources映射到虚拟文件系统的根目录下的resources，避免路径层级混乱：

EMCC_CFLAGS="-sUSE_GLFW=3 -sGL_ENABLE_GET_PROC_ADDRESS -sASYNCIFY -sASSERTIONS --preload-file src/resources@/resources" cargo build --release --target=wasm32-unknown-emscripten

3. 修改代码中的资源路径：将原来的"src/resources/walk.png"改为"resources/walk.png"，对应虚拟文件系统中的路径：

let sh_walk = Image::load_image("resources/walk.png").expect("could not load background image");

4. 确保编译产物同目录：把target/wasm32-unknown-emscripten/release下的.js、.wasm、.data文件放在同一目录，浏览器会自动加载.data文件。

二、跨环境（本地原生/WASM）资源加载方案 #

如果需要本地用常规文件加载，网页端用HTTP拉取资源，可以通过Rust条件编译实现：

方案1：条件编译区分加载逻辑 #

use raylib::prelude::*;

#[cfg(target_family = "wasm")]
fn load_game_image(path: &str) -> Image {
    // WASM环境：此处可以选择预加载路径，或者HTTP拉取
    Image::load_image(path).expect("Failed to load image in WASM environment")
}

#[cfg(not(target_family = "wasm"))]
fn load_game_image(path: &str) -> Image {
    // 本地原生环境：使用原路径加载
    Image::load_image(path).expect("Failed to load image in native environment")
}

fn main() {
    // 根据平台选择资源路径
    let image_path = if cfg!(target_family = "wasm") {
        "resources/walk.png"  // 对应预加载或服务器资源路径
    } else {
        "src/resources/walk.png"  // 本地原生路径
    };

    let sh_walk = load_game_image(image_path);
    // 后续游戏逻辑...
}

方案2：WASM环境下HTTP拉取资源（无需预加载） #

如果不想依赖预加载，直接从服务器拉取资源，可使用Raylib的HTTP请求API：

#[cfg(target_family = "wasm")]
fn load_image_from_web(url: &str) -> Image {
    let mut http_req = HttpRequest::new(url, HttpRequestMethod::HTTP_GET);
    http_req.send();

    // 等待请求完成
    while http_req.is_processing() {}

    if http_req.get_response_code() == 200 {
        let response_stream = http_req.get_response_stream();
        Image::load_image_from_stream(&response_stream).expect("Failed to load image from web stream")
    } else {
        panic!("Failed to fetch image: HTTP status {}", http_req.get_response_code())
    }
}

// 在main中调用（WASM环境）
// let sh_walk = load_image_from_web("/resources/walk.png");

此时需要将src/resources目录部署到服务器根目录，确保/resources/walk.png可通过HTTP访问。

内容的提问来源于stack exchange，提问作者coolguy123