如何修改React中asset函数以正确获取Laravel公共文件夹图片URL？

你的问题核心是import.meta.env.VITE_HOST的值缺少协议前缀（比如http://），导致浏览器将其识别为相对路径，和当前React页面的URL拼接在一起，生成了错误的地址。

修改方案 #

方案1：修正环境变量配置

在你的.env文件中，给VITE_HOST加上完整的协议前缀：

VITE_HOST=http://127.0.0.1:8000

这样原有的asset函数就能生成正确的URL：

function asset(path) {
    const assetUrl = import.meta.env.VITE_HOST;
    return `${assetUrl}/public/images/${path}`;
}

生成的URL会是：http://127.0.0.1:8000/public/images/xxx.png

方案2：在函数内补全协议前缀（无需修改环境变量）

如果不想改动环境变量，可以在asset函数里判断并补全协议：

function asset(path) {
    let assetUrl = import.meta.env.VITE_HOST;
    // 检查是否已包含协议前缀，没有则添加http://
    if (!/^https?:\/\//.test(assetUrl)) {
        assetUrl = `http://${assetUrl}`;
    }
    return `${assetUrl}/public/images/${path}`;
}

这个方案会自动处理带/不带协议的VITE_HOST值，避免相对路径问题。

额外注意

如果你的后端静态资源服务是直接将public/images映射为/images（比如很多框架默认的静态资源配置），可能需要去掉路径中的public/，改成：

return `${assetUrl}/images/${path}`;

具体取决于你的后端静态资源路由配置。

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