Vue.js+Laravel+Inertia环境下图片无法显示问题求助

问题场景 #

项目中Index.vue对应路由http://127.0.0.1:8000/clases，用于展示数据库中的clase条目，点击条目跳转至详情视图（如http://127.0.0.1:8000/clases/5）。在详情组件中引入Anuncios.vue展示图片时，出现404错误。

相关代码 #

<script setup>
const props = defineProps({
    data: Object,
    clase_id: Number,
    errors: Object,
});

const isImage = (data) => {
    const name = data.nombre;

    return name.endsWith(".jpeg");
};

const imageUrl = (url) => {
    return url.replace("public/", "storage/");
};
</script>
<template>
<div v-for="materiale in data.materiales">
    <div v-if="isImage(material)">
        <img :src="imageUrl(materiale.url)" alt="" srcset="">
    </div>
</div>
</template>

错误信息 #

浏览器控制台返回：

GET http://127.0.0.1:8000/clases/storage/materiales/17128465062.jpeg [HTTP/1.1 404 Not Found 651ms]

注：materiale.url原始值为public/materiales/17128465061.docx，已替换public/为storage/，但URL被自动添加clases前缀。

问题原因 #

当前处于/clases/5路由下，你生成的图片路径是相对路径（storage/materiales/...），浏览器会自动将其拼接为当前路由的子路径，最终得到/clases/storage/...，导致路径错误。

解决方法 #

方法1：转为绝对路径 #

修改imageUrl函数，在替换后的路径前添加/，让路径基于网站根目录：

const imageUrl = (url) => {
    return "/" + url.replace("public/", "storage/");
};

方法2：后端生成正确URL（推荐） #

利用Laravel的asset()辅助函数，在后端直接生成带根路径的绝对URL，前端无需再处理：

// 在Laravel控制器中处理materiales数据
$materiales = $clase->materiales->map(function ($material) {
    $material->url = asset(str_replace('public/', 'storage/', $material->url));
    return $material;
});

// 通过Inertia传递给前端
return Inertia::render('Clases/Show', [
    'data' => [
        'materiales' => $materiales
    ],
    // 其他参数...
]);

前端直接使用处理后的路径：

<img :src="materiale.url" alt="" srcset="">

额外注意事项 #

确保已执行Laravel存储链接命令，让storage/app/public目录与public/storage建立软链接：

php artisan storage:link

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