Laravel+Vue案例图片上传与展示问题：图片无法访问

问题描述 #

其他功能正常，但图片访问时返回错误：Cannot GET /storage/public/CQu7g4X98APkiMSbCGlqyiJhaXzLaEk8P0pZXaD3.jpg

原因分析 #

1. Laravel中存储到storage/app/public的文件需要通过软链接对外开放访问，当前未创建该链接
2. 数据库存储的路径是public/xxx.jpg，前端拼接后生成/storage/public/xxx.jpg，多了一层不必要的public/前缀，导致路径错误

解决步骤 #

1. 创建存储软链接 #

在项目根目录下执行Artisan命令，建立public/storage到storage/app/public的软链接：

php artisan storage:link

该操作仅需执行一次，之后上传的文件即可通过/storage/xxx路径正常访问。

2. 修正前端图片路径 #

修改前端展示图片的代码，去除路径中的public/前缀：

<img v-if="casee.image" :src="'/storage/' + casee.image.replace('public/', '')" alt="Case Image">

可选优化：后端直接返回可访问路径 #

若不想在前端处理路径，可修改后端代码，生成并返回正确的访问URL：

// 生成文件访问URL
$url = Storage::url($path);

$case = casee::create([
    'title' => $request->title,
    'description' => $request->description,
    'caseTypeId' => $request->caseTypeId,
    'amountneeded' => $request->amountneeded,
    'uid' => $request->uid,
    'visible' => $request->visible,
    'image' => $path, // 仍存储原始路径，或直接存储$url
]);

return response()->json(['image' => $url]);

此时前端可直接使用返回的URL作为图片地址：

<img v-if="casee.image" :src="casee.image" alt="Case Image">

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