如何从Laravel Storage向Vue前端展示图片？

首先咱们先捋清楚问题根源：
你当前代码同时用了store()和move()，相当于把图片存到了两个位置——一个在storage/app/images/profile，另一个在public/images/profile，但数据库里只存了store()返回的路径。而这个路径不在Laravel默认的可访问公共目录下（即使你执行了storage:link，软链接指向的是storage/app/public而非storage/app），所以前端自然无法获取到图片。另外，Vue里直接用数据库的相对路径作为图片src，缺少正确的域名/路径前缀，也会导致访问失败。

下面给你两个可行的解决方案，推荐用第一个（符合Laravel最佳实践）：

方案一：使用Laravel Storage公共存储目录（推荐） #

这个方案会把图片存到storage/app/public下，通过storage:link映射到public/storage，前端可以通过/storage/xxx直接访问。

1. 修改Laravel后端代码 #

调整存储逻辑，只存到公共存储目录，同时把数据库路径转换为可访问格式：

if($request->hasFile('avatar')) {
    $avatar = $request->file('avatar');
    // 将图片存到storage/app/public/images/profile目录
    $path = $avatar->store('public/images/profile');
    // 移除路径开头的"public/"，得到可通过/storage/访问的路径
    $accessiblePath = str_replace('public/', '', $path);
    
    // 保存到数据库
    $avatar_path = new UserProfile;
    $avatar_path->avatar = $accessiblePath;
    $avatar_path->save();
}

2. 修改Vue前端模板 #

在图片src前加上/storage/前缀（前后端同域名用相对路径即可；跨域则写全后端域名）：

<img :src="`/storage/${profile.avatar}`" alt="Profile Photo Image" width="200" height="200" class="img-thumbnail"/>

方案二：直接存储到public目录 #

如果你更倾向于把图片直接放到public目录下，可以调整代码如下：

1. 修改Laravel后端代码 #

移除冗余的store()方法，只保留move()，记得加上文件后缀（否则图片无法正常显示）：

if($request->hasFile('avatar')) {
    $avatar = $request->file('avatar');
    // 获取文件原始后缀（如jpg/png）
    $extension = $avatar->getClientOriginalExtension();
    $thumbnailName = "avatar".Date('YMdhis').'.'.$extension;
    // 移动到public/images/profile目录
    $avatar->move(public_path('images/profile'), $thumbnailName);
    // 数据库存储相对路径
    $path = "images/profile/{$thumbnailName}";
    
    $avatar_path = new UserProfile;
    $avatar_path->avatar = $path;
    $avatar_path->save();
}

2. 修改Vue前端模板 #

直接拼接后端域名或使用相对路径：

<!-- 同域名用相对路径 -->
<img :src="`/${profile.avatar}`" alt="Profile Photo Image" width="200" height="200" class="img-thumbnail"/>

<!-- 跨域写全路径 -->
<img :src="`http://127.0.0.1:8000/${profile.avatar}`" alt="Profile Photo Image" width="200" height="200" class="img-thumbnail"/>

额外注意事项 #

• 确认storage:link已正确创建：可以到项目public目录下查看是否有storage软链接，若没有则重新执行php artisan storage:link。
• 如果前端是独立部署的跨域项目，需在Laravel后端配置CORS，允许前端访问静态资源。

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