You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Laravel 9图片上传成功但无法显示问题咨询

Laravel 9图片上传后前端无法显示的解决方法

我在Laravel 9中实现了图片上传功能,图片已成功上传至服务器,数据库中存储的图片路径格式为/storage/images/1671456399_car1.jpg,但前端无法显示图片。查看浏览器控制台发现,生成的图片链接仅为http://127.0.0.1:8000/,缺失了具体的图片路径。

相关代码

前端显示代码

<td>
    <img src="{{ asset($item->photo) }}" width='50' height='50' class="img img-responsive" />
</td>

后端保存代码

$requestData = $request->all();
$filename = time() . "_" . $request->file('photo')->getClientOriginalName();
$path = $request->file('photo')->storeAs('images', $filename, 'public');
$requestData["photo"] = '/storage/' . $path;
Teacher::create($requestData);

实际渲染出的图片标签

<img src="http://127.0.0.1:8000/" width="50" height="50" class="img img-responsive">

问题分析

从渲染结果来看,asset($item->photo)仅输出了基础URL,说明$item->photo的值为空或null。即便数据库中存储了正确路径,读取时也没有正确获取到该字段。

解决方案

  • 检查模型可填充字段:确保Teacher模型的$fillable数组包含photo字段,否则批量创建记录时该字段不会被写入数据库:

    class Teacher extends Model
    {
        protected $fillable = ['photo', /* 其他需要批量赋值的字段 */];
    }
    
  • 创建存储软链接:Laravel需要通过软链接让前端访问storage/app/public下的文件,执行以下Artisan命令:

    php artisan storage:link
    
  • 验证数据读取逻辑:在前端模板中临时添加{{ $item->photo }},确认该字段是否有正确值;同时检查获取$item的代码,确保它是从数据库读取的合法Teacher实例。

  • 路径拼接验证:当前后端的路径拼接逻辑是正确的(/storage/images/xxx.jpg),但需确保$item->photo确实存储了这个值。

内容的提问来源于stack exchange,提问作者abi jega

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.07 13:55:16