Laravel 8 Sail环境下浏览器无法显示storage存储的图片如何解决

问题根因与修复方案 #

1. 修正文件存储逻辑 #

你的默认文件磁盘配置为public，对应根目录是storage/app/public，但你当前上传的图片存到了storage/app/images路径下，说明存储时没有正确命中public磁盘，修改控制器存储代码如下：

// 原代码
$image = Storage::put('images', $request->image); 
// 替换为 显式指定public磁盘存储
$image = Storage::disk('public')->put('images', $request->image);

同时检查.env文件中是否存在以下配置，确保默认磁盘生效：

FILESYSTEM_DRIVER=public

修改后新上传的图片会自动存到storage/app/public/images目录下，之前已上传的图片可手动移动到该目录即可复用。

2. 确认软链接有效性 #

你在WSL2环境通过Sail运行项目，必须在Sail容器内或者WSL2终端执行软链接创建命令，Windows宿主环境创建的软链接无法被Linux容器识别：

sail artisan storage:link

执行完成后进入Sail容器验证软链接指向正确：

sail shell
ls -la public
# 确认storage链接指向 -> ../storage/app/public

3. 修正站点地址配置 #

检查.env文件中的APP_URL配置，和你实际访问项目的地址保持一致，比如你本地访问地址是http://localhost:8000，则配置为：

APP_URL=http://localhost:8000

如果Sail映射了非80端口，必须在APP_URL中带上对应端口，否则asset()方法生成的资源地址端口错误，自然无法访问图片。

4. 优化模板图片渲染写法 #

不用手动拼接路径，直接使用Laravel提供的Storage门面生成公开访问地址，写法更稳妥：

{{-- 原写法 --}}
<img class="w-full" src="{{ asset( 'storage/' . $article->image) }}" alt="article_image">
{{-- 替换为 --}}
<img class="w-full" src="{{ Storage::url($article->image) }}" alt="article_image">

完成以上操作后清理配置缓存即可生效：

sail artisan config:clear

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